<template>
  <div class="maintorPage" id="maintorPage">
    <header class="header">
      <div class="left__title">
        <span>{{ parkName }}</span>
      </div>
      <div class="poll__play">

      </div>
      <div class="right__detail">
        <span>工作站：{{ workName }}</span>
        <span>操作员：{{ realName }}</span>
        <oncebutton :title="'换 班'" :fn="workchangeopen" />
      </div>
    </header>

    <section class="main">
      <div id="unfold" class="main unfold" v-show="isUfold">
        <div class="footer">
          <div class="left__order">
            <div class="content__order unfold_order" style="background: #112447">
              <div class="top__border"></div>
              <div class="bottom__border"></div>
              <!--  -->
              <div class="unfold__top">
                <div class="left">
                  <table class="inquire">
                    <!-- 车牌号 -->
                    <tr>
                      <td>车辆号码：</td>
                      <td>
                        <a-input v-model="inquireParams.plateNo" placeholder="支持模糊查询"></a-input>
                      </td>
                    </tr>
                    <!-- 出场地点： -->
                    <tr v-if="record == 'out' || record == 'park'">
                      <td>出场地点：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.serialNo"
                          :options="outArmNameOptions"
                        >
                        </a-select>
                      </td>
                    </tr>
                    <!-- 入场地点： -->
                    <tr v-else-if="record == 'entrance'">
                      <td>入场地点：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.serialNo"
                          :options="enterArmNameOptions"
                        >
                        </a-select>
                      </td>
                    </tr>
                    <!-- 入场类型： -->
                    <tr v-show="record == 'entrance'">
                      <td>入场类型：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.enterType"
                          :options="enterTypeOptions"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 停车状态： -->
                    <tr v-show="record == 'entrance'">
                      <td>停车状态：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.isOut"
                          :options="isOutOptions"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 出场类型： -->
                    <tr v-show="record == 'out'">
                      <td>出场类型：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.outerType"
                          :options="outerTypeOptions"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 月租套餐： -->
                    <tr v-show="record == 'monthly'">
                      <td>月租套餐：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.packageName"
                          :options="MonthlyPackage"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 月租状态： -->
                    <tr v-show="record == 'monthly'">
                      <td>月租状态：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.monthlyStatus"
                          :options="monthlyStatusOptions"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 操作员： -->
                    <tr v-show="record == 'charge'">
                      <td>操作员：</td>
                      <td>
                        <a-select
                          placeholder="全部"
                          :dropdownStyle="{ 'z-index': 9991 }"
                          v-model="inquireParams.sysUserName"
                          :options="workoperatoroptions"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 支付方式： -->
                    <tr v-show="record == 'charge'">
                      <td>支付方式：</td>
                      <td>
                        <a-select
                          :dropdownStyle="{ 'z-index': 9991 }"
                          placeholder="全部"
                          v-model="inquireParams.payType"
                          :options="payTypeOptions"
                        ></a-select>
                      </td>
                    </tr>
                    <!-- 时间 -->
                    <tr style="margin: 0">
                      <td>{{ inquiqreTimeText[record] }}时间：</td>
                      <td>
                        <a-radio-group
                          @change="inquireTimeChang"
                          v-model="inquireTimeradio"
                          size="large"
                          :options="[
                            { label: '今天', value: '0' },
                            { label: '昨天', value: '1' },
                            { label: '自定义', value: '2' },
                          ]"
                        />
                      </td>
                    </tr>
                    <tr v-show="inquireTimeradio == '2'">
                      <td>
                        <!-- @change="onChange" @ok="onOk" :show-time="{ format: 'HH:mm' }"-->
                        <a-range-picker
                          format="YYYY-MM-DD"
                          :placeholder="['起始时间', '截止时间']"
                          style="width: 2.5rem"
                          @change="inquireParamTime"
                          v-model="inquireParamsTime"
                          :disabled-date="disabladData"
                          :popupStyle="{ 'z-index': 9991 }"
                        />
                      </td>
                    </tr>
                  </table>
                </div>
                <div class="right">
                  <!-- <a-button type="primary" @click="inquiryMethod('')">查询</a-button>
                  <a-button
                    type="primary"
                    @click="inquiryReset('')"
                    style="background-color: transparent; color: #40a9ff; margin-left: 0.19rem"
                    >重置</a-button
                  > -->
                  <oncebutton :title="'查 询'" :fn="inquiryMethod" />
                  <oncebutton
                    :stylestr="'background-color: transparent; color: #40a9ff;'"
                    style="margin-left: 0.19rem"
                    :title="'重 置'"
                    :fn="inquiryReset"
                    :fnparams="''"
                  />
                </div>
              </div>
              <div class="content">
                <div class="top__content">
                  <div class="left">
                    <a-menu mode="horizontal" v-model="record">
                      <a-menu-item key="entrance"> 入场记录 </a-menu-item>
                      <a-menu-item key="out"> 出场记录 </a-menu-item>
                      <a-menu-item key="park"> 停车记录 </a-menu-item>
                      <a-menu-item key="charge"> 缴费记录 </a-menu-item>
                      <a-menu-item key="monthly"> 月租记录 </a-menu-item>
                    </a-menu>
                    <a-icon type="down" @click="isUfold = !isUfold" />
                  </div>
                </div>

                <pkordertable
                  v-show="record == 'entrance'"
                  ref="entrance"
                  :id="'entrance'"
                  :inquireParams="inquireParams"
                />

                <pkordertable v-show="record == 'out'" ref="out" :id="'out'" :inquireParams="inquireParams" />

                <pkordertable v-show="record == 'park'" ref="park" :id="'park'" :inquireParams="inquireParams" />

                <pkordertable v-show="record == 'charge'" ref="charge" :id="'charge'" :inquireParams="inquireParams" />

                <pkordertable
                  v-show="record == 'monthly'"
                  ref="monthly"
                  :id="'monthly'"
                  :inquireParams="inquireParams"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="monitor" class="left__monitor">
        <div class="left__monitor" v-if="monitornumber <= 8">
          <div class="item__monitoring" v-for="(item, index) in parkArm" :key="index">
            <div class="top__border"></div>
            <div class="bottom__border"></div>
            <div class="top__content">
              <div class="content__box">
                <!-- {{ item.noScreen }} -->
                <div class="left">
                  <img class="icon__car" src="~@/assets/monitor/car.png" alt="" />
                  <span class="title">{{ item.parkName }}>{{ item.armName }}</span>
                  <a-select
                    v-if="monitornumber <= 4"
                    :options="armSelectOptions"
                    :default-value="item.id"
                    @change="(value) => armSelectorChange(value, index)"
                  ></a-select>
                </div>

                <div class="right" v-if="CameraType == 0">
                  <span class="status" v-if="monitornumber <= 4" :data-anomaly="item.noScreen"></span>
                  <img
                    class="icon__fullscreen"
                    src="~@/assets/monitor/fullscreen.png"
                    alt=""
                    srcset=""
                    @click="fullScreenIndex = index"
                  />
                </div>
              </div>
            </div>

            <div class="websoket" v-if="CameraType == 0" @dblclick="fullScreenIndex = index">
              <img src="" alt="" :id="'img' + item.id" class="screenImg" v-show="!item.noScreen" />

              <div v-show="item.noScreen" class="anomaly">
                <img class="img" src="~@/assets/monitor/anomaly.png" alt="" srcset="" />
              </div>

              <div class="right__button" v-show="!item.noScreen">
                <!-- 重新识别 -->
                <div class="afresh" @click="triggerExt(item.serialNo)">重新识别</div>
                <!-- 应急开闸 -->
                <div class="cutoff" @click="emergencyOpen(item.serialNo)">应急开闸</div>
                <!-- 手动入场 -->
                <div class="entrance" @click="entranceModal = true" v-if="item.armType == 0">手动入场</div>
                <!-- 手动出场 -->
                <div class="appearance" @click="showManualoutenter(item.id, item.serialNo)" v-else>手动出场</div>
              </div>

              <a-modal
                :visible="index === fullScreenIndex"
                :footer="null"
                width="80%"
                :centered="true"
                :closable="false"
                :maskStyle="{ 'background-color': 'rgba(31, 31, 31, 0.9)' }"
                dialog-class="monitorScreenDialog"
              >
                <img class="right" src="~@/assets/monitor/restore.png" alt="" srcset="" @click="fullScreenIndex = -1" />

                <img src="" alt="" :id="'bigImg' + item.id" class="screenImg" v-show="!item.noScreen" />

                <div v-show="item.noScreen" class="anomaly">
                  <img class="img" src="~@/assets/monitor/anomaly.png" alt="" srcset="" />
                </div>
              </a-modal>
            </div>

            <div class="vlc" v-else>
              <object
                style="width: 100%; height: 100%; position: relative; z-index: 1"
                type="application/x-vlc-plugin"
                events="True"
                pluginspage="http://www.videolan.org"
                codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
              >
                <param name="mrl" :value="item.rtspUrl" />
                <param name="volume" value="50" />
                <param name="autoplay" value="true" />
                <param name="loop" value="false" />
                <param name="fullscreen" value="false" />
                <param name="toolbar" value="false" />
                <param name="bgcolor" value="transparent" />
              </object>
              <div class="right__button">
                <!-- 重新识别 -->
                <div class="afresh" @click="triggerExt(item.serialNo)">重新识别</div>
                <!-- 应急开闸 -->
                <div class="cutoff" @click="emergencyOpen(item.serialNo)">应急开闸</div>
                <!-- 手动入场 -->
                <div class="entrance" @click="entranceModal = true" v-if="item.armType == 0">手动入场</div>
                <!-- 手动出场 -->
                <div class="appearance" @click="showManualoutenter(item.id, item.serialNo)" v-else>手动出场</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right__detail">
        <div class="top__border"></div>
        <div class="bottom__border"></div>

        <div style="width: 100%; height: 100%" v-show="!websocketActionMain">
          <div class="top__content">
            <div class="left">
              <span class="title">场内车辆信息</span>
              <a-icon
                type="redo"
                :rotate="pkrotate"
                :style="{ fontSize: '0.31rem', color: '#fff' }"
                @click="parkintrarefresh"
              ></a-icon>
            </div>
            <div class="right">
              <a-button type="primary" @click="isChange = !isChange">{{ isChange ? '修正完成' : '修正车牌' }}</a-button>
            </div>
          </div>

          <div class="center__content">
            <table class="table" style="margin: 0">
              <tr class="title">
                <th>车牌图</th>
                <th>车牌号</th>
                <th>车辆类型</th>
                <th>进场时间</th>
              </tr>
            </table>

            <div id="tablebox">
              <a-spin :spinning="inParkingLoad" size="large" />
              <table class="table">
                <tr
                  v-for="(item, index) in data.inParkingCarList"
                  :key="index"
                  :class="index % 2 == 0 ? '' : 'even'"
                  @click="
                    (_) => {
                      parkPlateDetailData = item
                      parkPlateDetail = true
                    }
                  "
                >
                  <td class="td">
                    <div class="picture">
                      <img :src="item.imgPath" alt="" srcset="" />
                    </div>
                  </td>
                  <td class="td">
                    <span
                      v-if="!isChange"
                      @dblclick="
                        (_) => {
                          isChange = true
                        }
                      "
                      >{{ item.plateNo || '无牌车' }}</span
                    >
                    <a-popconfirm
                      v-else
                      placement="bottom"
                      :getPopupContainer="
                        (triggerNode) => {
                          return triggerNode.parentNode || document.body
                        }
                      "
                      :destroyTooltipOnHide="true"
                      :visible="editpopconfirmshow && index == editindex"
                    >
                      <span
                        @click.stop="
                          (_) => {
                            editpopconfirmshow = true
                            editindex = index
                          }
                        "
                        class="borderb"
                        >{{ item.plateNo || '无牌车' }}</span
                      >
                      <template #title>
                        <img
                          @click.stop="
                            (_) => {
                              editpopconfirmshow = false
                              editindex = -1
                            }
                          "
                          src="~@/assets/monitor/close.png"
                          alt=""
                          srcset=""
                          style="position: absolute; right: 0.06rem; top: 0.06rem"
                        />
                        <table>
                          <tr>
                            <td class="label">车牌号：</td>
                            <td style="font-size: 0.23rem">{{ item.plateNo }}</td>
                          </tr>

                          <tr>
                            <td class="label">修正为：</td>
                            <td>
                              <a-input
                                :placeholder="item.plateNo"
                                v-model="editPlateParams.plateNo"
                                @focus="
                                  (_) => {
                                    ipMethod = 'editPlateParams'
                                  }
                                "
                                @input="pip"
                                @blur="
                                  (_) => {
                                    pipBlur()
                                  }
                                "
                              ></a-input>
                            </td>
                          </tr>

                          <tr>
                            <td class="label">车牌颜色：</td>
                            <td class="platecolor" @click="editbuttoncolorshow = true">
                              <div class="before">{{ item.pcColor || '蓝色' }}</div>
                              <a-icon type="right" style="fontsize: 0.15rem; margin: 0 0.05rem"></a-icon>

                              <platecolorpopconfirm :colorType="platecolornumber" @altercolor="platealtercolor">
                                <div class="after">
                                  {{ cpys[platecolornumber] }}
                                  <a-icon
                                    type="down"
                                    style="
                                      fontsize: 0.19rem;
                                      margin: 0 0.05rem;
                                      color: #1b68d2;
                                      position: relative;
                                      left: 20%;
                                    "
                                  ></a-icon>
                                </div>
                              </platecolorpopconfirm>


                            </td>
                          </tr>

                          <tr>
                            <td class="label">备注：</td>
                            <td class="remark">

                              <j-dict-select-tag
                                :triggerChange="true"
                                dictCode="edit_plateno_remark"
                                @change="editplatenoremark"
                                v-model="editPlateParams.remark"
                              />
                            </td>
                          </tr>
                        </table>
                        <div class="button">
                          <a-button
                            type="primary"
                            @click="reseteditplate"
                            style="background-color: transparent; color: #2490ff"
                            >重置</a-button
                          >
                          <a-button type="primary" @click="editPlateNo(item.id, item.plateNo)">修正</a-button>
                        </div>
                      </template>
                    </a-popconfirm>
                  </td>
                  <td class="td">{{ item.carTypeName }}</td>
                  <td class="td">{{ item.carEnterTime }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

        <div style="width: 100%; height: 100%" class="action" v-show="websocketActionMain">
          <div class="enter" v-show="affirmenter">
            <span class="hint"
              >当前车位<span class="state" :data-full="enterParams.parkingIsFull == 1">{{
                enterParams.parkingIsFull == 1 ? '已满' : '未满'
              }}</span
              >，是否允许车辆通行？</span
            >
            <table>
              <tr>
                <td class="label">车牌号码：</td>
                <td class="plateNo">{{ enterParams.plateNo }}</td>
              </tr>
              <tr>
                <td class="label">车辆类型：</td>
                <td>
                  <a-select v-model="enterParams.carNature" :options="carTypeOption"></a-select>
                </td>
              </tr>
              <tr>
                <td class="label">入场时间：</td>
                <td>{{ enterParams.carEnterTime }}</td>
              </tr>
              <tr>
                <td class="label">入场地点：</td>
                <td>{{ enterParams.armName }}</td>
              </tr>
            </table>
            <div class="button">

              <oncebutton
                :stylestr="'background: #004fa1; color: #83c3ff; border-color: #004fa1'"
                :title="'取消放行【Q 键】'"
                :fn="enterReject"
              />

              <oncebutton :stylestr="'background: #2490ff; color: #fff'" :title="'确认放行【空格】'" :fn="enterAllow" />
            </div>
          </div>

          <div class="appear" id="mainapprat" v-show="outenterMain && !repairoutenterMain">
            <div class="topcontent">
              <div class="left">{{ againChargeParams.plateNo || WebparkOrderInfo.plateNo }}</div>
              <div class="rigth">
                <table v-show="!repairoutenter">
                  <tr>
                    <td class="label">车辆类型：</td>
                    <td>
                      <a-select
                        v-model="WebparkOrderInfo.carTypeId"
                        :options="carTypeOption"
                        @change="costAfresh"
                      ></a-select>
                    </td>
                  </tr>
                </table>
                <a-button
                  type="primary"
                  v-show="repairoutenter"
                  @click="
                    (_) => {
                      repairoutenterMain = true
                    }
                  "
                  >车牌更正</a-button
                >
              </div>
            </div>

            <div class="paydetail">
              <table>
                <tr>

                  <td class="label">应收金额：</td>
                  <td class="value">
                    <span>{{ (WebparkOrderInfo.chargeTotalFee / 100).toFixed(2) }}</span> 元
                  </td>
                </tr>
                <tr>
                  <td class="label">实收金额：</td>
                  <td class="value">
                    <span>{{ (WebparkOrderInfo.chargeUnpaid / 100).toFixed(2) }}</span> 元
                  </td>
                </tr>
              </table>
              <span style="padding: 0.38rem 0; color: #34ffa9">优惠金额：{{ WebparkOrderInfo.totalDiscAmt }}元</span>

              <oncebutton
                style="width: 100%"
                :stylestr="'width: 100%; height: 0.63rem !important; border-radius: 0.07rem; background-color: #2490ff; color: #fff'"
                :title="'缴费放行【空格】'"
                :fn="payOutMethod"
              />
            </div>

            <div class="botton">
              <div class="top">
                <div class="left">

                  <a-select
                    placeholder="免费放行"
                    v-model="freeOutValue"
                    :options="free_out_remark"
                    @change="freeOutMethod"
                  ></a-select>
                </div>
                <div class="right">
                  <a-select
                    placeholder="取消出场"
                    v-model="cancelOutValue"
                    :options="cancel_out_remark"
                    @change="cancelOutenterModal = true"
                  ></a-select>
                </div>
              </div>
              <div class="detail">
                <div class="left">
                  <table>
                    <tr>
                      <td class="label">入场车道：</td>
                      <td>{{ WebparkOrderInfo.enterArmName }}</td>
                    </tr>
                    <tr>
                      <td class="label">出场车道：</td>
                      <td>{{ WebparkOrderInfo.armName }}</td>
                    </tr>
                  </table>
                </div>
                <div class="right">
                  <table>
                    <tr>
                      <td class="label">入场时间：</td>
                      <td>{{ WebparkOrderInfo.enterTime }}</td>
                    </tr>
                    <tr>
                      <td class="label">出场时间：</td>
                      <td>{{ WebparkOrderInfo.outTime }}</td>
                    </tr>
                    <tr>
                      <td class="label">停车时长：</td>
                      <td>{{ timeFormatting(WebparkOrderInfo.chargeDuration) }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="entering" v-show="repairoutenter && repairoutenterMain">
            <div class="topcontent">
              <div class="left">{{ againChargeParams.plateNo || autoMatchingParams.plateNo }}</div>
              <div class="rigth">

              </div>
            </div>
            <div class="content">
              <table>
                <tr>
                  <td class="label">车牌号：</td>
                  <td style="font-size: 0.23rem">{{ againChargeParams.plateNo || autoMatchingParams.plateNo }}</td>
                </tr>
                <tr>
                  <td class="label">修正为：</td>
                  <td>
                    <a-input
                      :placeholder="autoMatchingParams.plateNo"
                      v-model="againChargeParams.plateNo"
                      @focus="
                        (_) => {
                          ipMethod = 'againChargeParams'
                        }
                      "
                      @input="pip"
                      @blur="
                        (_) => {
                          pipBlur()
                        }
                      "
                    ></a-input>
                  </td>
                </tr>
                <tr>
                  <td class="label">车牌颜色：</td>
                  <td class="platecolor">
                    <div class="before">蓝色</div>
                    <a-icon type="right" style="fontsize: 0.15rem; margin: 0 0.05rem"></a-icon>
                    <platecolorpopconfirm :colorType="platecolornumber" @altercolor="platealtercolor">
                      <div class="after">
                        {{ cpys[platecolornumber] }}
                        <a-icon
                          type="down"
                          style="fontsize: 0.19rem; margin: 0 0.05rem; color: #1b68d2; position: relative; left: 20%"
                        ></a-icon>
                      </div>
                    </platecolorpopconfirm>
                  </td>
                </tr>
              </table>
            </div>
            <div class="button">
              <a-button
                type="primary"
                style="background-color: transparent; color: #2490ff"
                @click="
                  (_) => {
                    repairoutenterMain = false
                  }
                "
                >取消</a-button
              >
              <a-button
                type="primary"
                @click="
                  (_) => {
                    repairoutenterMain = false
                  }
                "
                >更正</a-button
              >
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer id="footer" class="footer">
      <div class="left__order">
        <div v-show="!isUfold" id="content__order" class="content__order">
          <div class="top__border"></div>
          <div class="bottom__border"></div>

          <div class="content" v-show="!websocketActionFooter">
            <div class="top__content">
              <div class="left">
                <a-menu mode="horizontal" v-model="record">
                  <a-menu-item key="entrance"> 入场记录 </a-menu-item>
                  <a-menu-item key="out"> 出场记录 </a-menu-item>
                  <a-menu-item key="park"> 停车记录 </a-menu-item>
                  <a-menu-item key="charge"> 缴费记录 </a-menu-item>
                  <a-menu-item key="monthly"> 月租记录 </a-menu-item>
                </a-menu>
                <a-icon type="up" @click="isUfold = !isUfold" />
              </div>
              <div class="right" style="display: flex; align-items: center">
                <input v-model="inquireParams.plateNo" type="text" placeholder="搜车牌" style="margin-right: 0.25rem" />
                <!-- <button class="search" @click="inquiryMethod()">查询</button> -->
                <oncebutton class="search" :title="'查 询'" :fn="inquiryMethod" />
                <a-popconfirm
                  placement="bottom"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  "
                >
                  <span class="con">条件筛选</span>
                  <template #title>
                    <table>
                      <!-- 车牌号 -->
                      <tr>
                        <td>车辆号码：</td>
                        <td>
                          <a-input v-model="inquireParams.plateNo" placeholder="支持模糊查询"></a-input>
                        </td>
                      </tr>
                      <!-- 出场地点： -->
                      <tr v-if="record == 'out' || record == 'park'">
                        <td>出场地点：</td>
                        <td>
                          <a-select placeholder="全部" v-model="inquireParams.armName" :options="outArmNameOptions">
                          </a-select>
                        </td>
                      </tr>
                      <!-- 入场地点： -->
                      <tr v-else-if="record == 'entrance'">
                        <td>入场地点：</td>
                        <td>
                          <a-select placeholder="全部" v-model="inquireParams.armName" :options="enterArmNameOptions">
                          </a-select>
                        </td>
                      </tr>
                      <!-- 入场类型： -->
                      <tr v-show="record == 'entrance'">
                        <td>入场类型：</td>
                        <td>
                          <a-select
                            placeholder="全部"
                            v-model="inquireParams.enterType"
                            :options="enterTypeOptions"
                          ></a-select>
                        </td>
                      </tr>
                      <!-- 停车状态： -->
                      <tr v-show="record == 'entrance'">
                        <td>停车状态：</td>
                        <td>
                          <a-select placeholder="全部" v-model="inquireParams.isOut" :options="isOutOptions"></a-select>
                        </td>
                      </tr>
                      <!-- 出场类型： -->
                      <tr v-show="record == 'out'">
                        <td>出场类型：</td>
                        <td>
                          <a-select
                            placeholder="全部"
                            v-model="inquireParams.outerType"
                            :options="outerTypeOptions"
                          ></a-select>
                        </td>
                      </tr>
                      <!-- 月租套餐： -->
                      <tr v-show="record == 'monthly'">
                        <td>月租套餐：</td>
                        <td>
                          <a-select
                            placeholder="全部"
                            v-model="inquireParams.packageName"
                            :options="MonthlyPackage"
                          ></a-select>
                        </td>
                      </tr>
                      <!-- 月租状态： -->
                      <tr v-show="record == 'monthly'">
                        <td>月租状态：</td>
                        <td>
                          <a-select
                            placeholder="全部"
                            v-model="inquireParams.monthlyStatus"
                            :options="monthlyStatusOptions"
                          ></a-select>
                        </td>
                      </tr>
                      <!-- 操作员： -->
                      <tr v-show="record == 'charge'">
                        <td>操作员：</td>
                        <td>
                          <a-select
                            placeholder="全部"
                            v-model="inquireParams.sysUserName"
                            :options="workoperatoroptions"
                          ></a-select>
                        </td>
                      </tr>
                      <!-- 支付方式： -->
                      <tr v-show="record == 'charge'">
                        <td>支付方式：</td>
                        <td>
                          <a-select
                            placeholder="全部"
                            v-model="inquireParams.payType"
                            :options="payTypeOptions"
                          ></a-select>
                        </td>
                      </tr>
                      <!-- 时间 -->
                      <tr style="margin: 0">
                        <td>{{ inquiqreTimeText[record] }}时间：</td>
                        <td>
                          <a-radio-group
                            @change="inquireTimeChang"
                            v-model="inquireTimeradio"
                            size="large"
                            :options="[
                              { label: '今天', value: '0' },
                              { label: '昨天', value: '1' },
                              { label: '自定义', value: '2' },
                            ]"
                          />
                        </td>
                      </tr>
                      <tr v-show="inquireTimeradio == '2'">
                        <td></td>
                        <td>
                          <!-- @change="onChange" @ok="onOk" :show-time="{ format: 'HH:mm' }"-->
                          <a-range-picker
                            format="YYYY-MM-DD"
                            :placeholder="[`起始时间`, `截止时间`]"
                            style="width: 2.5rem"
                            @change="inquireParamTime"
                            v-model="inquireParamsTime"
                            :disabled-date="disabladData"
                          />
                        </td>
                      </tr>
                    </table>
                    <div class="button">

                      <oncebutton :title="'查 询'" :fn="inquiryMethod" />
                      <oncebutton
                        style="margin-left: 0.19rem"
                        :stylestr="'background-color: transparent; color: #40a9ff;'"
                        :title="'重 置'"
                        :fn="inquiryReset"
                        :fnparams="'Down'"
                      />
                    </div>
                  </template>
                </a-popconfirm>
              </div>
            </div>

            <div class="middle__content">
              <pkordertable
                v-show="record == 'entrance'"
                ref="entranceDown"
                :id="'entrance'"
                :isDown="true"
                :inquireParams="inquireParams"
              />

              <pkordertable
                v-show="record == 'out'"
                ref="outDown"
                :id="'out'"
                :isDown="true"
                :inquireParams="inquireParams"
              />

              <pkordertable
                v-show="record == 'park'"
                ref="parkDown"
                :id="'park'"
                :isDown="true"
                :inquireParams="inquireParams"
              />

              <pkordertable
                v-show="record == 'charge'"
                ref="chargeDown"
                :id="'charge'"
                :isDown="true"
                :inquireParams="inquireParams"
              />

              <pkordertable
                v-show="record == 'monthly'"
                ref="monthlyDown"
                :id="'monthly'"
                :isDown="true"
                :inquireParams="inquireParams"
              />
            </div>
          </div>

          <div class="content action" v-show="websocketActionFooter">
            <!-- 正常出场 -->
            <div class="parkAppear" v-show="normaloutenter && !repairoutsuccess">
              <!-- 入口相机 -->
              <div class="enter">
                <div class="topcontetnt">
                  <div class="left">
                    <img class="icon__car" src="~@/assets/monitor/car.png" alt="" />
                    <span class="title">东门入口相机</span>
                  </div>

                  <div class="right">{{ WebparkOrderInfo.plateNo }}</div>
                </div>

                <img :src="WebparkOrderInfo.imgPath" alt="" srcset="" />
              </div>
              <!-- 出口相机 -->
              <div class="appear">
                <div class="topcontetnt">
                  <div class="left">
                    <img class="icon__car" src="~@/assets/monitor/car.png" alt="" />
                    <span class="title">东北门出口</span>
                  </div>

                  <div class="right">{{ WebparkOrderInfo.plateNo }}</div>
                </div>
                <img :src="WebparkOrderInfo.outImgPath" alt="" srcset="" />
              </div>
            </div>

            <!-- 正常入场 -->
            <div class="parkEnter" v-show="affirmenter">
              <!-- 入口相机 -->
              <div class="enter">
                <div class="topcontetnt">
                  <div class="left">
                    <img class="icon__car" src="~@/assets/monitor/car.png" alt="" />
                    <span class="title">{{ enterParams.armName }}</span>
                  </div>

                  <div class="right">{{ enterParams.plateNo }}</div>
                </div>

                <img :src="enterParams.imgPath" alt="" srcset="" />
              </div>
              <!-- 入场信息 -->
              <div class="detail">
                <table>
                  <tr>
                    <td class="label">识别车牌：</td>
                    <td class="value">
                      <a-input
                        v-model="enterParams.plateNo"
                        :placeholder="enterParams.plateNo"
                        @focus="
                          (_) => {
                            ipMethod = 'enterParams'
                          }
                        "
                        @input="pip"
                        @blur="
                          (_) => {
                            pipBlur()
                          }
                        "
                      />
                        </td>
                  </tr>
                  <tr>
                    <td class="label">车辆类型：</td>
                    <td class="value">临时车A</td>
                  </tr>
                  <tr>
                    <td class="label">入场时间：</td>
                    <td class="value">{{ enterParams.carEnterTime }}</td>
                  </tr>
                  <tr>
                    <td class="label">入场地点：</td>
                    <td class="value">{{ enterParams.armName }}</td>
                  </tr>
                </table>
              </div>
            </div>

            <!-- 补录信息 -->
            <div class="repairMes" v-show="repairoutsuccess">
              <div class="detail" style="position: relative">
                <span
                  class="hint"
                  style="font-size: 0.38rem; color: #49ffb2; position: absolute; top: 0.38rem; left: 0.5rem"
                  >补录信息</span
                >
                <table>
                  <tr>
                    <td class="label">车辆类型：</td>
                    <td class="value">临时车A</td>
                  </tr>
                  <tr>
                    <td class="label">入场地点：</td>
                    <td class="value">{{ WebparkOrderInfo.armName }}</td>
                  </tr>
                  <tr>
                    <td class="label">入场时间：</td>
                    <td class="value">{{ WebparkOrderInfo.enterTime }}</td>
                  </tr>
                </table>
              </div>
              <div class="appear">
                <div class="topcontetnt">
                  <div class="left">
                    <img class="icon__car" src="~@/assets/monitor/car.png" alt="" />
                    <span class="title">{{ WebparkOrderInfo.enterArmName }}</span>
                  </div>

                  <div class="right">{{ WebparkOrderInfo.plateNo }}</div>
                </div>
                <img :src="WebparkOrderInfo.outImgPath" alt="" srcset="" />
              </div>
            </div>

            <div class="manualAppear" v-show="ismanualAndrepairAndmatching">
              <div class="content">
                <span class="hint" v-show="manualoutenter">您可以输入模糊车牌号，点击查询按钮查找在场车辆信息</span>

                <div class="parkMatching" v-show="matchingoutenter">
                  <img
                    src="~@/assets/monitor/left.png"
                    alt=""
                    class="lefticon"
                    :data-show="matchingLeftIconShow == true"
                    @click="
                      (_) => {
                        plateMacthingCkIndex = -1
                        autoMatchingParams.pageNo--
                        autoMatchingEnterLogForCurrentOutCar()
                      }
                    "
                  />

                  <img
                    src="~@/assets/monitor/right.png"
                    alt=""
                    class="righticon"
                    :data-show="matchingRightIconShow == true"
                    @click="
                      (_) => {
                        plateMacthingCkIndex = -1
                        autoMatchingParams.pageNo++
                        autoMatchingEnterLogForCurrentOutCar()
                      }
                    "
                  />
                  <div
                    class="item"
                    v-for="(item, index) in matchingArray"
                    :key="index"
                    @click="
                      (_) => {
                        let oldindex = plateMacthingCkIndex
                        plateMacthingCkIndex = index
                        againChargeForCurrentOutCar()
                          .then((_) => {
                            plateMacthingCkIndex = index
                          })
                          .catch((_) => {
                            plateMacthingCkIndex = oldindex
                          })
                      }
                    "
                  >
                    <div class="top">
                      <table>
                        <tr>
                          <td>车牌识别：</td>
                          <td class="color-fff">{{ item.plateNo }}</td>
                        </tr>
                        <tr>
                          <td>入场时间：</td>
                          <td class="color-fff">{{ item.carEnterTime }}</td>
                        </tr>
                      </table>
                    </div>

                    <div class="parkimg">
                      <!-- 相似度 similarityRatio-->
                      <div class="similarityRatio">相似度：{{ Math.ceil(item.similarityRatio) }}%</div>
                      <!-- 主图 -->
                      <img :src="item.ossImgPath" alt="" srcset="" style="width: 100%; height: 100%" />
                      <!-- 选中图 -->
                      <img
                        src="~@/assets/monitor/pick.png"
                        alt=""
                        class="pick"
                        :data-ck="plateMacthingCkIndex == index"
                      />
                    </div>
                  </div>
                </div>

                <div class="parkEntering" v-show="repairoutenter">
                  <span class="hint">未查询到场内记录，进行人工补录</span>
                  <table>
                    <tr>
                      <td class="label">车辆类型：</td>
                      <td>
                        <a-select
                          v-model="againChargeParams.carTypeId"
                          placeholder="请选择车辆类型"
                          :options="carTypeOption"
                        ></a-select>
                      </td>
                    </tr>
                    <tr>
                      <td class="label">入场车道：</td>
                      <td>
                        <a-select
                          placeholder="请选择入场车道"
                          :options="enterArmNameOptions"
                          v-model="againChargeParams.serialNo"
                        ></a-select>
                      </td>
                    </tr>
                    <tr>
                      <td class="label">入场时间：</td>
                      <td style="display: flex">
                        <a-date-picker
                          format="YYYY-MM-DD HH:mm:ss"
                          show-time
                          v-model="againChargeParams.enterDate"
                          :disabled-date="disabladData"
                        />
                        <a-button
                          type="primary"
                          style="margin-left: 0.19rem"
                          @click="againChargeSaveEnterForCurrentOutCar"
                          >补录</a-button
                        >
                      </td>
                    </tr>
                  </table>
                </div>
              </div>

              <div class="botton">
                <table>
                  <tr>
                    <td class="adapth_ide">入场车道：</td>
                    <td>
                      <a-select
                        placeholder="入场车道"
                        :options="enterArmNameOptions"
                        v-model="autoMatchingParams.armName"
                        @change="
                          (_) => {
                            againChargeParams.parkCode = autoMatchingParams.armName
                          }
                        "
                      ></a-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="adapth_ide">车牌类型：</td>
                    <td>
                      <a-select
                        placeholder="车牌类型"
                        v-model="autoMatchingParams.carNature"
                        :options="carTypeOption"
                        @change="
                          (_) => {
                            againChargeParams.carNature = autoMatchingParams.carNature
                          }
                        "
                      ></a-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="adapth_ide">入场时间：</td>
                    <td>
                      <a-range-picker
                        format="YYYY-MM-DD"
                        :placeholder="['入场起始时间', '入场截止时间']"
                        v-model="inquireParamsTime"
                        @change="
                          (event) => {
                            autoMatchingParams.timeStart = ''
                            autoMatchingParams.timeEnd = ''
                            !isEmpty(event) && (autoMatchingParams.timeStart = moment(event[0]).format('YYYY-MM-DD'))
                            !isEmpty(event) && (autoMatchingParams.timeEnd = moment(event[1]).format('YYYY-MM-DD'))
                          }
                        "
                        :disabled-date="disabladData"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td
                      style="padding-right: 0.19rem"
                      @click="
                        (_) => {
                          autoMatchingParams.plateNo = ''
                          notPlateNo = !notPlateNo
                        }
                      "
                    >
                      <div class="placeholdericon" :data-pick="notPlateNo == true"></div>
                      无牌车
                    </td>
                    <td>
                      <a-input
                        v-show="!notPlateNo"
                        placeholder="请输入至少三位数车牌号"
                        v-model="autoMatchingParams.plateNo"
                      ></a-input>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding-right: 0.19rem">
                      <a-button
                        type="primary"
                        @click="
                          (_) => {
                            autoMatchingParams.pageNo = 1
                            manualoutenterMethod()
                          }
                        "
                        >查询</a-button
                      >
                    </td>
                    <td>
                      <a-button
                        type="primary"
                        style="background-color: transparent; color: #2490ff"
                        @click="resetManualEnterParamsMethod"
                        >取消</a-button
                      >
                    </td>
                  </tr>
                </table>
              </div>
            </div>

            <div class="parkPlateDetail" v-show="parkPlateDetail">
              <div class="enter">
                <div class="topcontetnt">
                  <div class="left">
                    <img class="icon__car" src="~@/assets/monitor/car.png" alt="" />
                    <span class="title">{{ parkPlateDetailData.armName }}相机</span>
                  </div>

                  <div class="right">{{ parkPlateDetailData.plateNo }}</div>
                </div>

                <img :src="parkPlateDetailData.imgPath" alt="" srcset="" />
              </div>
              <div class="detail" style="">
                <table>
                  <tr>
                    <td class="label">识别车牌：</td>
                    <td class="value">
                      {{ parkPlateDetailData.plateNo }}
                    </td>
                  </tr>
                  <tr>
                    <td class="label">状态：</td>
                    <td class="value">{{ isOutText[parkPlateDetailData.isOut] }}</td>
                  </tr>
                  <tr>
                    <td class="label">车辆类型：</td>
                    <td class="value">{{ parkPlateDetailData.carTypeName || '无' }}</td>
                  </tr>
                  <tr>
                    <td class="label">进场时间：</td>
                    <td class="value">{{ parkPlateDetailData.carEnterTime }}</td>
                  </tr>
                  <tr>
                    <td class="label">停车时长：</td>
                    <td class="value">{{ parkPlateDetailData.parkDuration }}</td>
                  </tr>
                </table>

                <table>
                  <tr>
                    <td class="label">入场地点：</td>
                    <td class="value">
                      {{ parkPlateDetailData.armName }}
                    </td>
                  </tr>
                  <tr>
                    <td class="label">入场方式：</td>
                    <td class="value">{{ enterTypeText[parkPlateDetailData.enterType] }}</td>
                  </tr>
                  <tr>
                    <td class="label">终端名称：</td>
                    <td class="value">{{ parkPlateDetailData.workName }}</td>
                  </tr>
                  <tr>
                    <td class="label">当班操作员：</td>
                    <td class="value">{{ parkPlateDetailData.sysUserName }}</td>
                  </tr>
                  <tr>
                    <td class="label">备注：</td>
                    <td class="value">
                      <a-input v-model="parkPlateDetailData.remark" disabled></a-input>
                    </td>
                  </tr>
                </table>
              </div>
              <div
                class="close"
                @click="
                  (_) => {
                    emptywebsocketaction()
                  }
                "
              >
                <img src="~@/assets/monitor/close.png" alt="" srcset="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right__myDetail">
        <div class="top__border"></div>
        <div class="bottom__border"></div>
        <div class="content">
          <div class="top__content">
            <a-menu mode="horizontal" v-model="current">
              <a-menu-item key="pk"> 车场状态 </a-menu-item>
              <a-menu-item key="my"> 我的 </a-menu-item>
            </a-menu>
          </div>
          <div class="middle__content">
            <!--  -->
            <div v-show="current == 'pk'" class="pkDetail__vessel">
              <div class="pknumber">
                <span class="title">总车位/剩余车位</span>
                <span class="number">
                  <span style="color: #00d7ff">{{ totalParkSpace }}/</span>
                  <span style="color: #40ff29">{{ remainingPark }}</span>
                </span>
              </div>
              <div class="pkstatus">
                <span class="temporaryCar" :data-attr="parkSpace">场内临时车</span>
                <span class="fixedCar" :data-attr="parkSpaceLong">场内固定车</span>
                <span class="restsCar" :data-attr="parkSpaceOther">场内其他车</span>
              </div>
            </div>
            <div v-show="current == 'my'" id="myDetail__vessel" class="myDetail__vessel">
              <div class="workTime">上班时间 : {{ upTime }}</div>
              <div class="detail__content">
                <span class="diy-fz14">应收金额</span>
                <span class="diy-fz14">总放行&nbsp;&nbsp;&nbsp;</span>
              </div>
              <div class="detail__content">
                <div>
                  <span class="diy-fz30" style="color: #00d7ff">{{ manualReceivable + onlineReceivable }}</span>
                  <span>&nbsp;元</span>
                </div>
                <span class="diy-fz30" style="color: #fff">{{ allOutNum }}&nbsp;</span>
              </div>
              <div class="detail__content">
                <span class="diy-fz14">免费金额</span>
                <div>
                  <span>免费放行 : </span>
                  <span>{{ freeOut }}辆</span>
                </div>
              </div>
              <div class="detail__content">
                <div>
                  <span class="diy-fz30" style="color: #f7b500">{{ manualFree + onlineFree }}</span>
                  <span>&nbsp;元</span>
                </div>
                <div>
                  <span>异常放行 : </span>
                  <span>{{ abnormalOut }}辆</span>
                </div>
              </div>
              <div class="detail__content">
                <span class="diy-fz14">实收金额</span>
                <div>
                  <span>正常收费放行 : </span>
                  <span>{{ normalFeeOut }}辆</span>
                </div>
              </div>
              <div class="detail__content">
                <div>
                  <span style="font-size: 0.38rem; color: #fff">{{ manualPaid + onlinePaid }}</span>
                  <span>&nbsp;元</span>
                </div>
                <div>
                  <span>正常自动放行 : </span>
                  <span>{{ normalNoFeeOut }}辆</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <a-modal v-model="workchangemodel" title="换班" footer="" :centered="true">
      <div class="top1">
        <div>
          <img src="~@/assets/monitor/monitor@2x.png" width="30" alt="" />
          <span class="title">{{ workchangedata.workName }}</span>
        </div>
        <span>&nbsp;上班时间：{{ workchangedata.upTime }}</span>
      </div>
      <div class="top2">
        <div>
          <img src="~@/assets/monitor/user@2x.png" width="30" alt="" />
          <span class="title">{{ workchangedata.operationName }}</span>
        </div>
        <span>&nbsp;交班时间：{{ workchangedata.nowtime }}</span>
      </div>
      <div class="middle">
        <table border="1">
          <thead>
            <tr>
              <th></th>
              <th>人工收费（元）</th>
              <th>电子支付（元）</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>应收金额</td>
              <td>{{ workchangedata.manual_receivable }}</td>
              <td>{{ workchangedata.online_receivable }}</td>
            </tr>
            <tr>
              <td>实收金额</td>
              <td>{{ workchangedata.manual_paid }}</td>
              <td>{{ workchangedata.online_paid }}</td>
            </tr>
            <tr>
              <td>免费金额</td>
              <td>{{ workchangedata.manual_free }}</td>
              <td>{{ workchangedata.online_free }}</td>
            </tr>
            <tr>
              <td>优惠金额</td>
              <td>{{ workchangedata.manual_deduction }}</td>
              <td>{{ workchangedata.online_deduction }}</td>
            </tr>
            <tr>
              <td>抵扣金额</td>
              <td>0</td>
              <td>0</td>
            </tr>
          </tbody>
        </table>
        <table border="1">
          <thead>
            <tr>
              <th>车流量信息</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>总放行车：{{ workchangedata.out_num }}</td>
            </tr>
            <tr>
              <td>免费放行：{{ workchangedata.free_num }}</td>
            </tr>
            <tr>
              <td>异常放行：{{ workchangedata.abnormal_num }}</td>
            </tr>
            <tr>
              <td>正常收费放行：{{ workchangedata.normal_fee }}</td>
            </tr>
            <tr>
              <td>正常自动放行：{{ workchangedata.normal_no_fee }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="bottom">
        <table>
          <tr>
            <td class="lable">交班操作员：</td>
            <td>
              <a-select v-model="workchangeparams.username" :options="workoperatoroptions" placeholder="选择交班操作员">
              </a-select>
            </td>
          </tr>
          <tr>
            <td class="lable">密码：</td>
            <td>
              <a-input v-model="workchangeparams.password" type="password" autocomplete="false" placeholder="密码">
              </a-input>
            </td>
          </tr>
          <tr>
            <td class="lable">交班备注：</td>
            <td>
              <a-input v-model="workchangeparams.remark" type="text" autocomplete="false" placeholder="交班备注">
              </a-input>
            </td>
          </tr>
        </table>
      </div>
      <div class="button">
        <a-button
          type="primary"
          style="background-color: #fff; color: #dadada; border: 0.01rem solid #dadada"
          size="large"
          @click="workchangemodel = false"
          >关闭</a-button
        >
        <a-button type="primary" size="large" @click="requestWorkChenge">确定</a-button>
      </div>
    </a-modal>

    <a-modal :centered="true" v-model="entranceModal" title="手动入场" footer="">
      <div class="enterContent">
        <table>
          <tr>
            <td class="label">开闸车道：</td>
            <td class="value">
              <a-select
                placeholder="请选择开闸车道"
                v-model="manualEnterParams.serialNo"
                :options="enterAmrOptions"
              ></a-select>
            </td>
          </tr>
          <tr>
            <td class="label"><span style="color: red">*</span> 车牌号：</td>
            <td class="value">
              <a-input
                v-model="manualEnterParams.plateNo"
                placeholder="请输入车牌号"
                @input="pip"
                @focus="
                  (_) => {
                    ipMethod = 'manualEnterParams'
                  }
                "
                @blur="pipBlur"
              ></a-input>
            </td>
          </tr>
          <tr>
            <td class="label">车牌颜色：</td>
            <td class="value platecolor">
              <div
                v-for="(item, index) in cpys"
                class="coloritem"
                :key="index"
                :data-index="index"
                @click="manualEnterParams.enterPlateColorNumber = index"
              >
                {{ item }}
                <div class="ck" :data-ck="manualEnterParams.enterPlateColorNumber == index" :data-index="index"></div>
              </div>
            </td>
          </tr>
          <tr style="padding: 0 0.19rem">
            <td class="label">开闸原因：</td>
            <td class="value">
              <a-select
                placeholder="请选择开闸原因"
                v-model="manualEnterParams.remark"
                :options="manual_open_remark"
              ></a-select>
            </td>
          </tr>
        </table>
      </div>

      <div class="button" style="padding: 0.55rem 0 0.63rem">
        <a-button
          type="primary"
          style="background-color: #fff; color: #dadada; border: 0.01rem solid #dadada"
          size="large"
          @click="resetManualEnterParams"
          >关闭</a-button
        >
        <a-button type="primary" size="large" @click="manualOpenedSaveParkCarEnterLog">开闸</a-button>
      </div>
    </a-modal>

    <a-modal :centered="true" v-model="cancelOutenterModal" title="取消出场" footer="">
      <div class="canceloutenter">
        <span style="display: block; margin: 1.15rem 0">您确定要取消此车辆出场吗？</span>
        <div class="button">
          <a-button
            type="primary"
            style="background: transparent; border-color: #dadada; color: #999999"
            @click="
              (_) => {
                cancelOutenterModal = false
                cancelOutValue = undefined
              }
            "
            >取消</a-button
          >
          <a-button type="primary" @click="cancelOutMethod" :loading="cancelOutLoading">确认</a-button>
        </div>
      </div>
    </a-modal>

    <a-modal :centered="true" v-model="lookpicture" footer="" class="lookpicture">
      <img src="" alt="" />
    </a-modal>

    <div class="carModalWrap"></div>
  </div>
</template>

<script>
/**
 * 视频监控的websocket连接，以及相应的心跳检测重连机制
 */

function ScreenWs(parkArm, index, vueContext) {
  this.parkArm = parkArm //车道信息
  this.parkArmIndex = index //车道下标
  this.vueContext = vueContext //vue中的this
}

ScreenWs.prototype.init = function () {
  this.create()
  this.vueContext.WebSockets.push(this)
}
ScreenWs.prototype.create = function () {
  try {
    console.log('视频WS create')
    this.ws = new WebSocket(this.parkArm.videoUrl)
    this.initEventHandle()
  } catch (error) {
    console.log('视频WS create代码执行失败')
    this.reconnect()
  }
}
ScreenWs.prototype.timerClean = function () {
  this.timer && clearTimeout(this.timer)
  this.reconnectTimer && clearTimeout(this.reconnectTimer)
}
ScreenWs.prototype.initEventHandle = function () {
  console.log('视频WS事件绑定', this.parkArmIndex)
  this.ws.onopen = () => {
    console.log('视频ws open', this.parkArmIndex)
    this.vueContext.parkArmStateChange(this.parkArm, this.parkArmIndex, false)
  }
  this.ws.onerror = () => {
    console.log('视频wserror', this.parkArmIndex)
  }
  this.ws.onclose = (e) => {
    //ws因各种原因断开后重新创建ws连接
    console.log(e)
    if (this.forceClose) {
      console.log('强制关闭视频ws', this.parkArmIndex)
      this.vueContext.parkArmStateChange(this.parkArm, this.parkArmIndex, true)
      this.timerClean()
    } else {
      console.log('视频ws close', this.parkArmIndex)
      this.vueContext.parkArmStateChange(this.parkArm, this.parkArmIndex, true)
      this.reconnect()
    }
  }
  this.ws.onmessage = (event) => {
    this.timer && clearTimeout(this.timer)
    if (this.parkArm.noScreen) {
      console.log(this.parkArm.noScreen)
    }
    if (this.parkArm.noScreen === true) {
      console.log('更新web监控显示状态')
      this.vueContext.parkArmStateChange(this.parkArm, this.parkArmIndex, false)
    }
    this.timer = setTimeout(() => {
      //接收消息后10s内没有再次接收到消息时执行：当前车道没有画面，提示是否网络掉线等
      console.log('已经十秒钟没有哦接收到画面了', this.parkArmIndex)
      this.ws.close()
    }, 10000)
    let imgDom = document.getElementById('img' + this.parkArm.id)
    if (imgDom === null) {
      return
    }
    let reader = new FileReader()
    let that = this
    reader.onload = function (readerEvent) {
      if (readerEvent.target.readyState === FileReader.DONE) {
        imgDom.src = this.result
        if (that.vueContext.fullScreenIndex === that.parkArmIndex) {
          document.getElementById('bigImg' + that.vueContext.parkArm[that.vueContext.fullScreenIndex].id).src =
            this.result
        }
      }
    }
    reader.readAsDataURL(event.data)
  }
}
ScreenWs.prototype.reconnect = function () {
  console.log('视频WS reconert')
  if (this.lockReconnect) return
  this.lockReconnect = true
  //没连接上会一直重连，设置延迟避免请求过多
  this.timerClean()
  this.reconnectTimer = setTimeout(() => {
    console.log('重连定时器函数执行', this.parkArmIndex)
    this.create()
    this.lockReconnect = false
  }, 2000)
}
ScreenWs.prototype.close = function () {
  this.forceClose = true
  this.timerClean()
  this.ws && this.ws.close()
}
import Vue from 'vue'
import moment from 'moment'
import { ACCESS_TOKEN, USER_NAME, USER_INFO } from '@/store/mutation-types'
import {
  filterObj,
  isEmpty,
  apiParamsDetection,
  welcome,
  timeFormatting,
  isVehicleNumber,
  dateFormat,
} from '@/utils/util'
import { getAction, postAction, putAction } from '@/api/manage'
import monitorShiftModal from './modules/monitorShiftModal.vue'
import pkordertable from './components/pkordertable.vue'
import platecolorpopconfirm from './components/platecolorpopconfirm.vue'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { encryption, getEncryptedString } from '@/utils/encryption/aesEncrypt'
import { mapActions } from 'vuex'
import './js/flexible'
import oncebutton from './components/oncebutton.vue'

let inParkingLoad = true
export default {
  name: 'Watchhouse',
  components: {
    monitorShiftModal,
    pkordertable,
    platecolorpopconfirm,
    oncebutton,
  },
  data() {
    return {
      cancelOutLoading: false,
      manualserialNo: '',
      editindex: -1,
      editpopconfirmshow: false,
      editbuttoncolorshow: false,
      lookpicture: false,
      matchingLeftIconShow: true,
      matchingRightIconShow: true,
      cancelOutenterModal: false,
      cancel_out_remark: [],
      cancelOutValue: undefined,
      free_out_remark: [],
      freeOutValue: undefined,
      manual_open_remark: [],
      MonthlyPackage: [],
      upTime: '',
      manualReceivable: '',
      onlineReceivable: '',
      allOutNum: '',
      freeOut: '',
      manualFree: '',
      onlineFree: '',
      abnormalOut: '',
      normalFeeOut: '',
      manualPaid: '',
      onlinePaid: '',
      normalNoFeeOut: '',
      carNatureOptions: [
        { label: '临时车', value: 0 },
        { label: '月租车', value: 1 },
        { label: '储值车', value: 2 },
        { label: '军警车', value: 3 },
        { label: '白名单', value: 4 },
      ],

      fullScreenIndex: -1,
      parkName: '中岳新天地停车场',
      data: {
        parkCarEnterLogList: null,
        inParkingCarList: null,
      },

      monitoringData: null,
      monitornumber: 1,
      pkcardetailnumber: 20,
      pkrotate: 220,
      current: ['pk'],
      record: ['entrance'],
      isChange: false,
      isUfold: false,
      workchangemodel: false,
      entranceModal: false,
      condition: false,
      vmanualOut: false,
      xzcph: false, // 是否可修正车牌号状态
      xgys: false, //修改车牌颜色
      cpys: ['蓝色', '黄色', '白色', '绿色', '黄绿', '黑色'],
      cpys_i: 0,
      inParkingCarParams: {
        pageNo: 1,
        pageSize: 20,
      },
      inParkingLoad: true,
      footerOrderLoad: true,
      totalParkSpace: '',
      remainingPark: '',
      parkSpace: '',
      parkSpaceLong: '',
      parkSpaceOther: '',
      workName: '',
      realName: '',

      inquireParams: {
        serialNo: undefined, // 车辆入出场地序列号
        plateNo: '',
        armName: undefined, // 车辆入出场地点
        timeStart: '', // 车辆入出场开始时间、月租到期开始时间
        timeEnd: '', // 车辆入结束时间、月租到期结束时间
        enterType: '', //	入场类型 1 : 正常入场 2：手动入场
        isOut: '', //车辆状态 0: 在场 1:已出场
        outerType: '', //	outerType （1 : 正常出场 2：手动出场 3：补录场内）
        monthlyStatus: '', //月租状态 (1、正常 2、报停 3、注销 4、过期)
        sysUserName: undefined, //	操作员账号
        payType: '', //支付类型：1微信，2支付宝,3无感支付，4,全免劵，5储值车，6线下收费
        packageName: undefined,
      },

      inquireParamsTime: ['', ''],

      monthlyStatusOptions: [
        { label: '全部', value: '' },
        { label: '正常', value: 1 },
        { label: '报停 ', value: 2 },
        { label: '注销', value: 3 },
        { label: '过期', value: 4 },
      ],

      payTypeOptions: [
        { label: '全部', value: '' },
        { label: '微信', value: 1 },
        { label: '支付宝 ', value: 2 },
        { label: '无感支付', value: 3 },
        { label: '全免劵', value: 4 },
        { label: '储值车', value: 5 },
        { label: '线下收费 ', value: 6 },
      ],
      outerTypeOptions: [
        { label: '全部', value: '' },
        { label: '正常出场', value: 1 },
        { label: '手动出场 ', value: 2 },
        { label: '补录场内', value: 3 },
      ],
      isOutOptions: [
        { label: '全部', value: '' },
        { label: '在场', value: 0 },
        { label: '已出场', value: 1 },
      ],
      isOutText: ['在场', '已出场'],
      enterTypeOptions: [
        { label: '全部', value: '' },
        { label: '默认', value: 0 },
        { label: '重复入场', value: 1 },
        { label: '手动入场', value: 2 },
        { label: '补录入场', value: 3 },
      ],
      enterTypeText: ['默认', '重复入场', '手动入场', '补录入场'],

      enterArmNameOptions: Array(),
      outArmNameOptions: Array(),
      inquiqreTimeText: {
        out: '出场',
        monthly: '到期',
        entrance: '入场',
        park: '出场',
        charge: '收费',
      },

      inquireTimeradio: '2',

      allParkArm: Array(),
      parkArm: [],
      WebSockets: Array(), // WebSocket 视频监控容器
      userInfo: {},
      armSelectOptions: Array(), // 更换车道下拉列表

      CameraType: -1, // WebSocket (==0) and rtsp(!=0)

      // footer
      normaloutenter: 0, // 正常出场
      manualoutenter: 0, // 手动出场
      repairoutenter: 0, // 补录出场
      repairoutsuccess: 0,
      matchingoutenter: 0, // 匹配出场
      parkPlateDetail: 0,
      parkPlateDetailData: {},
      matchingArray: Array(), // 无入场记录匹配结果列表
      plateMacthingCkIndex: 0, // 匹配选中车辆
      normalOutEnterQueue: [], // 出场队列

      affirmenter: 0,
      affirmEnterQueue: [],

      webActionExecuteQueue: [],

      castQueueIndex: 0,

      webActionMethod: '',

      repairoutenterMain: 0, // 补录更正

      platecolornumber: 0, // 车牌颜色

      editPlateParams: {
        id: '',
        plateNo: '',
        pcColor: '',
        remark: '',
      },

      workchangedata: {
        free_num: 0,
        normal_fee: 0,
        abnormal_num: 0,
        manual_deduction: 0,
        operationName: '',
        normal_no_fee: 0,
        workName: '',
        online_deduction: 0,
        online_paid: 0,
        upTime: '',
        nowtiome: '',
        manual_free: 0,
        manual_paid: 0,
        online_free: 0,
        online_receivable: 0,
        out_num: 0,
        manual_receivable: 0,
      },

      workoperatoroptions: Array(),

      workchangeparams: {
        username: '', //操作员
        password: '',
        remark: '',
      },

      WebparkOrderInfo: {},

      carTypeOption: [],

      enterAmrOptions: [],

      manualEnterParams: {
        serialNo: undefined, // 入场车道

        enterPlateColorNumber: 0, // 入场车牌颜色

        plateNo: '', //入场车牌号

        remark: undefined,

        carNature: undefined,
      },

      enterParams: {
        plateNo: '',
        serialNo: '',
        carNature: undefined,
        pcColor: '',
      },

      autoMatchingParams: {
        plateNo: '', //	晋EHX111	是	string	车牌号
        armName: undefined, //	入口1	否	string	入场车道
        timeStart: '', //	2022-02-17 09:49:20	否	string	入场开始时间
        timeEnd: '', //	2022-02-17 09:49:20	否	string	入场结束时间
        pageNo: 1, //	1	是	int	页码
        pageSize: 4, //	4	是	int	每页条数
        carNature: undefined, //	是	string	车辆类型
      },

      notPlateNo: 0,

      againChargeParams: {
        parkCode: '', //	是	string	车场编码
        plateNo: '', //	是	string	车牌号
        serialNo: undefined, //	是	string	相机序列号
        enterDate: '', //	是	string	入场时间
        carTypeId: undefined, //	是	string	车辆类型
        ossImgPath: '', //	是	string	图片地址
      },

      serverWSHeartCheck: null,
      serverWS: null,
      serverWsForceClose: false,
      ipMethod: undefined,
    }
  },
  computed: {
    //  footer WebSocket 操作状态
    websocketActionFooter(value) {
      return (
        this.normaloutenter ||
        this.manualoutenter ||
        this.repairoutenter ||
        this.matchingoutenter ||
        this.affirmenter ||
        this.parkPlateDetail ||
        this.repairoutsuccess
      )
    },
    //  main-right websocket 操作状态
    websocketActionMain(value) {
      return this.normaloutenter || this.repairoutenter || this.matchingoutenter || this.affirmenter
    },
    // 手动出场 补录出场 匹配出场
    ismanualAndrepairAndmatching() {
      return this.manualoutenter || this.repairoutenter || this.matchingoutenter
    },
    outenterMain() {
      return this.normaloutenter || this.repairoutenter || this.matchingoutenter
    },
  },
  watch: {
    outenterMain(value) {
      this.$nextTick((_) => {
        let elemainapprat = document.getElementById('mainapprat')
        isEmpty(elemainapprat.style.display) && document.addEventListener('keydown', this.outenterkeyboardaction, false)
        elemainapprat.style.display && document.removeEventListener('keydown', this.outenterkeyboardaction, false)
      })
    },
    affirmenter(value) {
      document.removeEventListener('keydown', this.normalenterkeyboardaction, false)
      value && document.addEventListener('keydown', this.normalenterkeyboardaction, false)
    },
    inquireTimeradio(value) {
      let { timeStart, timeEnd } = this.inquireParams
      switch (value) {
        case '0':
          timeStart = moment().format('YYYY-MM-DD') + ' 00:00:00'
          timeEnd = moment().format('YYYY-MM-DD') + ' 23:59:59'
          break
        case '1':
          timeStart = moment().subtract(1, 'day').format('YYYY-MM-DD') + ' 00:00:00'
          timeEnd = moment().subtract(1, 'day').format('YYYY-MM-DD') + ' 23:59:59'
          break
        default:
          timeStart = ''
          timeEnd = ''
          break
      }

      this.inquireParams = Object.assign({}, this.inquireParams, { timeStart, timeEnd })
    },
    WebparkOrderInfo(value) {
      isEmpty(value.chargeTotalFee) && (this.WebparkOrderInfo.chargeTotalFee = 0)
      isEmpty(value.chargeUnpaid) && (this.WebparkOrderInfo.chargeUnpaid = 0)
      isEmpty(value.plateNo) && (this.WebparkOrderInfo.plateNo = '无牌车')
    },
    webActionExecuteQueue(value) {
      console.log(value)

      this.castQueueIndex = 0
      if (!isEmpty(this.webActionMethod)) return
      switch (value[0]) {
        case 'matchingoutenter':
          this.WebparkOrderInfo = this.normalOutEnterQueue[0]
          this.autoMatchingParams.plateNo = this.WebparkOrderInfo.plateNo
          this.webActionMethod = 'normalOutEnterQueue'
          this.WebparkOrderInfo.serialNo && (this.manualserialNo = this.WebparkOrderInfo.serialNo)
          this.autoMatchingEnterLogForCurrentOutCar()
          break
        case 'normaloutenter':
          this.WebparkOrderInfo = this.normalOutEnterQueue[0]
          this.webActionMethod = 'normalOutEnterQueue'
          break
        case 'affirmenter':
          this.enterParams = this.affirmEnterQueue[0]
          this.webActionMethod = 'affirmEnterQueue'
          break
        default:
          break
      }
      value && this.openwebsocketaction(value[0])
    },
    record(value) {
      this.inquiryReset()
    },
  },
  methods: {
    resetManualEnterParamsMethod() {
      this.notPlateNo = 0
      this.autoMatchingParams = {
        plateNo: '', //	晋EHX111	是	string	车牌号
        armName: undefined, //	入口1	否	string	入场车道
        timeStart: '', //	2022-02-17 09:49:20	否	string	入场开始时间
        timeEnd: '', //	2022-02-17 09:49:20	否	string	入场结束时间
        pageNo: 1, //	1	是	int	页码
        pageSize: 4, //	4	是	int	每页条数
        carNature: undefined, //	是	string	车辆类型
      }
      this.againChargeParams = {
        parkCode: '', //	是	string	车场编码
        plateNo: '', //	是	string	车牌号
        serialNo: undefined, //	是	string	相机序列号
        enterDate: '', //	是	string	入场时间
        carNature: undefined, //	是	string	车辆类型
        ossImgPath: '', //	是	string	图片地址
        outPlateNo: '', //	是	string	出口识别的车牌号，模糊匹配用
      }
      this.manualserialNo = ''
      this.WebparkOrderInfo = {}
      this.inquireParamsTime = ['', '']
      this.emptywebsocketaction()
      this.webCastQueue()
    },
    webCastQueue() {
      this.webActionMethod &&
        this[this.webActionMethod].length &&
        this[this.webActionMethod].splice(this.castQueueIndex, 1)
      this.castQueueIndex == 0 && (this.webActionMethod = '')
      this.webActionExecuteQueue.splice(this.castQueueIndex, 1)
    },
    openwebsocketaction(methods) {
      this.emptywebsocketaction()
      this[methods] = !this[methods]
    },
    emptywebsocketaction() {
      this.normaloutenter =
        this.manualoutenter =
        this.manualoutenter =
        this.repairoutenter =
        this.matchingoutenter =
        this.affirmenter =
        this.repairoutenterMain =
        this.parkPlateDetail =
        this.repairoutsuccess =
          0
      this.matchingArray = Array()
    },
    // -----------------------------
    setServerWSUrl() {
      //测试地址
      // let wsUrl = 'ws://' + location.hostname + ':8094/park-single/websocket/' + this.mac
      // this.serverWSUrl = 'ws://' + '192.168.2.121' + ':8094/park-single/websocket/' + this.userInfo.id
      //生产环境地址
      //this.serverWSUrl = 'ws://' + location.hostname + '/park-single/websocket/' + this.userInfo.id
        this.serverWSUrl = 'wss://' + test.jdd966.cn + '/park-single/websocket/' + this.userInfo.id
      // this.serverWSUrl = 'ws://' + location.hostname + ':8094/park-single/websocket/' + this.userInfo.id
      // this.serverWSUrl = 'ws://127.0.0.1:8094/park-single/websocket/' + this.userInfo.id
    },
    serverWSCreate() {
      //与后台服务的ws连接
      this.setServerWSUrl()
      let lockReconnect = false
      let reconnectTimer // websocket重连定时器
      let that = this,
        timeoutTimer = null, // websocket心跳定时器
        timeout = 10000, // websocket心跳定时器间隔时间 10秒
        reconnectTimeuot = 2000 //  websocket重连定时器间隔时间 2秒

      function create() {
        try {
          console.log('创建与服务端的连接')
          that.serverWS = new WebSocket(that.serverWSUrl)
          initEventHandle()
        } catch (error) {
          console.log('创建与服务端的连接代码异常', error)
          reconnect()
        }
      }

      let initEventHandle = () => {
        console.log('与服务端的ws事件绑定')
        that.serverWS.onopen = () => {
          console.log('与服务端的连接open')
          timeoutTimer && clearInterval(timeoutTimer) // 清除心跳定时器
          timeoutTimer = setInterval(function () {
            console.log('与服务端的连接心跳timeoutTimer处理函数执行')
            that.serverWS.send('ping')
          }, timeout)
        }
        that.serverWS.onmessage = () => {
          console.log('与服务端的连接message')
          if (event.data === '连接成功') return

          let data = JSON.parse(event.data)
          console.log(data, 'userInfo.id:' + that.userInfo.id)

          if (data.parkOrderInfos) {
            // 出入场自动开闸
            that.totalParkSpace = data.totalParkSpace
            that.parkSpaceLong = data.parkSpaceLong
            that.parkSpaceOther = data.parkSpaceOther
            that.remainingPark = data.remainingPark
            that.data.inParkingCarList = data.inParkinglotCar
            that.parkSpace = data.parkSpace //场内临时车数量
            that.inParkingCarParams.pageNo = 2
            that.inquiryReset('Down')
            data.HandOverLog && that.HandOverLogDispose(data.HandOverLog)
          } else if (data.parkOrderInfo) {
            if (that.normalOutEnterQueue.find((e) => e.plateNo == data.parkOrderInfo.plateNo)) return
            that.normalOutEnterQueue.push(data.parkOrderInfo)
            if (isEmpty(data.parkOrderInfo.carEnterId)) {
              that.webActionExecuteQueue.push('matchingoutenter')
            } else {
              that.webActionExecuteQueue.push('normaloutenter')
            }
          } else if (data.armId) {
            if (that.affirmEnterQueue.find((e) => e.plateNo == data.plateNo)) return
            that.affirmEnterQueue.push({
              carNature: that.carTypeOption[0].value,
              plateNo: data.plateNo,
              serialNo: data.serialNo,
              pcColor: '蓝色',
              parkingIsFull: data.parkingIsFull,
              imgPath: data.imgPath,
              armName: data.armName,
              carEnterTime: data.carEnterTime,
            })
            that.webActionExecuteQueue.push('affirmenter')
          } else if (data.successOrder) {
            that.castQueueIndex = that.normalOutEnterQueue.findIndex(
              (e) => e.plateNo == data.successOrder.plateNo && e.serialNo == data.successOrder.serialNo
            )
            console.log(that.castQueueIndex, '其他终端出场')
            that.castQueueIndex || (that.castQueueIndex == 0 && that.resetManualEnterParamsMethod())
          }
        }
        that.serverWS.onclose = () => {
          console.log('与服务端的连接close', `是否退出监控:${that.serverWsForceClose}`)
          if (that.serverWsForceClose) {
            console.log('退出服务连接')
            timeoutTimer && clearInterval(timeoutTimer) // 清除心跳定时器
            reconnectTimer && clearTimeout(reconnectTimer) // 清除重连定时器
            return
          }
          reconnect()
        }
        that.serverWS.onerror = (error) => {
          // debugger;
          console.log('与服务端的连接error', error)
          reconnect()
        }
      }

      function reconnect() {
        timeoutTimer && clearInterval(timeoutTimer) // 清除心跳定时器
        console.log('与服务端的连接reconnect', that.userInfo.id)
        // console.log('lockReconnect:', lockReconnect)
        if (lockReconnect) return
        lockReconnect = true
        reconnectTimer && clearTimeout(reconnectTimer) // 清除重连定时器
        reconnectTimer = setTimeout(() => {
          console.log('lockReconnect:', lockReconnect)
          create()
          lockReconnect = false
        }, reconnectTimeuot)
      }

      create()
    },
    // -----------------------------
    // 模拟websocket 出场
    smweb(carEnterId) {
      return new Promise((resolve, reject) => {
        let parkOrderInfo = {
            armName: '出口1',
            // carEnterId: "1501861238588571648",
            carEnterId,
            chargeDuration: 1,
            chargeTotalFee: '200',
            chargeUnpaid: '200',
            enterTime: '2022-03-10 18:03:17',
            id: '1501861665652604928',
            ipAddr: '192.168.2.144',
            orderStatus: '1',
            parkCode: '79945',
            parkName: '龙工停车场-Test',
            plateNo: '豫EHX111' + carEnterId,
            serialNo: '2fb711e8-8b0147e8',
            type: '1',
          },
          action

        if (parkOrderInfo) {
          this.normalOutEnterQueue.push(parkOrderInfo)
          if (isEmpty(parkOrderInfo.carEnterId)) {
            // 无入场记录
            action = 'matchingoutenter'
            this.autoMatchingParams.plateNo = parkOrderInfo.plateNo
            // this.autoMatchingEnterLogForCurrentOutCar()
          } else {
            // 正常出场
            // action = 'normaloutenter'
            this.webActionExecuteQueue.push('normaloutenter')
          }
        }

        resolve(true)
      })
    },
    // 模拟websocket 入场
    smwebenter() {
      return new Promise((resolve, reject) => {
        this.affirmEnterQueue.push({
          carNature: this.carTypeOption[0].value,
          plateNo: '豫EHX111',
          serialNo: '2fb711e8-8b0147e8',
          pcColor: '蓝色',
          parkingIsFull: 'data.parkingIsFull',
          imgPath: 'data.imgPath',
          armName: 'data.armName',
          carEnterTime: 'data.carEnterTime',
        })
        this.webActionExecuteQueue.push('affirmenter')
        resolve(true)
      })
    },

    pipBlur() {
      isEmpty(isVehicleNumber(this[this.ipMethod].plateNo)) && (this[this.ipMethod].plateNo = '')
      this.ipMethod = ''
    },
    pip() {
      let { ipMethod } = this,
        { plateNo } = this[ipMethod]
      if (plateNo.length > 8) {
        this[ipMethod].plateNo = plateNo.substring(0, 8)
      } else if (plateNo.length == 7 || plateNo.length == 8) {
        !isVehicleNumber(this[ipMethod].plateNo) &&
          this.$nextTick((_) => {
            this.$notification['warning']({ message: '温馨提示', description: '请输入正确车牌!' })
            this[ipMethod].plateNo = ''
          })
      }
    },

    console(value) {
      console.log(value)
    },
    isEmpty,
    moment,
    timeFormatting,
    ...mapActions(['Logout']),
    //应急开闸
    emergencyOpen(serialNo) {
      getAction('sdk/unfold', { serialNo }).then((res) => {
        this.$message[res.success ? 'success' : 'error'](res.message)
      })
    },
    //重新识别
    triggerExt(serialNo) {
      getAction('/sdkidentifyresultpushlog/sdkIdentifyResultPushLog/triggerExt', { serialNo }).then((res) => {
        this.$message[res.success ? 'success' : 'error'](res.message)
      })
    },
    // 重置入场参数
    resetManualEnterParams() {
      this.entranceModal = false
      for (let i in this.manualEnterParams) {
        switch (i) {
          case 'serialNo':
            this.manualEnterParams[i] = undefined
            break
          case 'remark':
            this.manualEnterParams[i] = undefined
            break
          case 'carNature':
            this.manualEnterParams[i] = undefined
            break
          default:
            this.manualEnterParams[i] = ''
            break
        }
      }
    },
    // 手动入场
    manualOpenedSaveParkCarEnterLog() {
      let { manualEnterParams, cpys, manual_open_remark, carTypeOption } = this,
        { enterPlateColorNumber, plateNo, serialNo } = manualEnterParams,
        pcColor = cpys[enterPlateColorNumber],
        remark,
        detection = {
          serialNo: '请选择入场车道',
          plateNo: '请输入车牌',
          pcColor: '请选择车牌颜色',
          remark: '请选择开闸原因',
        }
      manualEnterParams.remark && (remark = manual_open_remark.find((e) => e.value == manualEnterParams.remark).text)
      apiParamsDetection({ serialNo, plateNo, pcColor, remark }, detection, this)
        .then((_) => {
          if (isEmpty(isVehicleNumber(plateNo))) {
            this.$notification['warning']({ message: '温馨提示', description: '请输入正确车牌!' })
            return carNature
          }
          return postAction('/sentryBox/inParkingCar/manualOpenedSaveParkCarEnterLog', {
            pcColor,
            plateNo,
            serialNo,
            remark,
          })
        })
        .then((res) => {
          if (res.success) {
            this.$notification['success']({
              message: '温馨提示',
              description: '手动入场成功',
            })
          }

          this.resetManualEnterParams()
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleLogout() {
      const that = this

      this.$confirm({
        title: '提示',
        content: () => {
          return <div>真的要注销登录吗 ?</div>
        },
        onOk() {
          that.loginOut()
        },
        onCancel() {},
      })
    },
    loginOut() {
      const that = this
      return that
        .Logout({})
        .then(() => {
          // window.location.href="/";
          that.closeWebSocket()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    disabladData(current) {
      return this.record == 'monthly' ? null : current && current > moment().endOf('day')
    },
    // 补录入场记录并生成计费信息
    againChargeSaveEnterForCurrentOutCar() {
      //       parkCode	是	string	车场编码
      // plateNo	是	string	车牌号
      // serialNo	是	string	相机序列号
      // enterDate	是	string	入场时间
      // carNature	是	string	车辆类型
      // ossImgPath	是	string	图片地址
      // outPlateNo	是	string	出口识别的车牌号，模糊匹配用

      let { serialNo, plateNo, enterDate, carTypeId, ossImgPath } = this.againChargeParams,
        { parkCode } = this.enterArmNameOptions.find((e) => e.value == serialNo),
        detection = {
          serialNo: '请选择入场车道',
          plateNo: '请输入车牌',
          enterDate: '请选择入场时间',
          carNature: '请选择车辆类型',
        },
        pcColor = this.cpys[this.platecolornumber],
        outSerialNo
      outSerialNo = this.manualserialNo

      plateNo = plateNo != '无牌车' && plateNo ? plateNo : this.autoMatchingParams.plateNo
      enterDate = typeof enterDate == 'string' ? enterDate + '00:00:00' : enterDate.format('YYYY-MM-DD HH:mm:ss')
      if (!isVehicleNumber(plateNo)) {
        this.$notification['error']({ message: '系统提示', description: '请输入完整车牌' })
        return
      }
      postAction('/sentryBox/inParkingCar/againChargeSaveEnterForCurrentOutCar', {
        serialNo,
        plateNo,
        enterDate,
        carTypeId,
        ossImgPath,
        parkCode,
        pcColor,
        outSerialNo,
      }).then((res) => {
        if (res.success) {
          this.WebparkOrderInfo = res.result
          this.emptywebsocketaction()
          this.repairoutsuccess = true
          this.normaloutenter = true

          console.log(res)
        }
      })

      console.log(this.enterArmNameOptions.find((e) => e.value == this.againChargeParams.serialNo))
    },
    // 取消放行
    enterReject() {
      return new Promise((resolve, reject) => {
        let { serialNo, plateNo } = this.enterParams
        this.refuseCarEnter('/sentryBox/inParkingCar/refuseCarEnter', { serialNo, plateNo }, '取消放行').then((_) => {
          resolve(true)
        })
      })
    },
    // 确认放行
    enterAllow() {
      return new Promise((resolve, reject) => {
        this.enterParams.carTypeId = this.enterParams.carNature
        this.refuseCarEnter('/sentryBox/inParkingCar/openedSaveParkCarEnterLog', this.enterParams, '确认放行').then(
          (_) => {
            resolve(true)
          }
        )
      })
    },
    // 入场放行接口
    refuseCarEnter(url, params, hint) {
      return new Promise((resolve, reject) => {
        postAction(url, params).then((res) => {
          if (res.success) {
            this.$notification['success']({ message: '温馨提示', description: `${hint}成功` })
            this.resetManualEnterParamsMethod()
          }
          resolve(true)
        })
      })
    },

    // 取消放行
    cancelOutMethod(value) {
      let { serialNo, plateNo } = this.WebparkOrderInfo,
        remark = this.cancel_out_remark.find((e) => e.value == this.cancelOutValue).text
      console.log(this.cancelOutValue, { serialNo, plateNo, remark })
      isEmpty(serialNo) && (serialNo = this.manualserialNo)

      this.cancelOutLoading = true
      postAction('/sentryBox/inParkingCar/cancelCurrentCarOut', { serialNo, plateNo, remark })
        .then((res) => {
          console.log(res)
          this.cancelOutLoading = false
          if (res.success) {
            this.$notification['success']({ message: '温馨提示', description: '取消出场成功' })
          }

          this.cancelOutenterModal = false
          this.cancelOutValue = undefined
          this.resetManualEnterParamsMethod()
        })
        .catch((e) => {})
        .finally((_) => {})
    },
    // 缴费放行
    payOutMethod() {
      return new Promise((resolve, reject) => {
        console.log('缴费放行', this.WebparkOrderInfo)
        let ioUnfoldParams = Object.assign({}, this.WebparkOrderInfo)
        ioUnfoldParams.orderStatus = 2
        this.requestOutEnter(ioUnfoldParams).then((_) => {
          resolve(true)
        })
      })
    },

    // 免费放行
    freeOutMethod() {
      let ioUnfoldParams = Object.assign({}, this.WebparkOrderInfo),
        remark = this.free_out_remark.find((e) => e.value == this.freeOutValue).text
      this.freeOutValue = undefined
      ioUnfoldParams.remark = remark
      this.requestOutEnter(ioUnfoldParams)
    },
    // 出场放行接口
    requestOutEnter(order) {
      postAction('/sdk/ioUnfold', order).then((res) => {
        if (res.success) {
          this.$notification['success']({ message: '温馨提示', description: res.message })
        }
        this.resetManualEnterParamsMethod()
      })
    },
    // 重新计费
    costAfresh() {
      let { carEnterId, plateNo, serialNo, enterTime, carTypeId } = this.WebparkOrderInfo
      postAction('/parking/parkCharge/parkChargeFee', { carEnterId, plateNo, serialNo, enterTime, carTypeId }).then(
        (res) => {
          if (res.success) {
            this.$notification['success']({ message: '温馨提示', description: '计费成功' })
            this.WebparkOrderInfo = res.result
          }
          console.log(res)
        }
      )
    },
    // 模糊匹配后并重新计费
    againChargeForCurrentOutCar() {
      console.log('模糊匹配后并重新计费', this.plateMacthingCkIndex)

      // if (this.plateMacthingCkIndex == undefined) return
      //       parkCode	是	string	车场编码
      // plateNo	是	string	车牌号
      // serialNo	是	string	相机序列号
      // outPlateNo	是	string	出口识别的车牌号，模糊匹配用
      // ossImgPath	是	string	图片地址
      let { matchingArray, plateMacthingCkIndex, autoMatchingParams } = this,
        { plateNo, serialNo, ossImgPath, parkCode } = matchingArray[plateMacthingCkIndex],
        outPlateNo,
        outSerialNo
      outSerialNo = this.manualserialNo
      outPlateNo = plateNo
      autoMatchingParams.plateNo &&
        isVehicleNumber(autoMatchingParams.plateNo) &&
        (outPlateNo = autoMatchingParams.plateNo)
      console.log(
        { parkCode, plateNo, serialNo, ossImgPath, outPlateNo },
        !isVehicleNumber(outPlateNo),
        autoMatchingParams.plateNo
      )
      return new Promise((resolve, reject) => {
        postAction('/sentryBox/inParkingCar/againChargeForCurrentOutCar', {
          parkCode,
          plateNo,
          serialNo,
          ossImgPath,
          outPlateNo,
          outSerialNo,
        })
          .then((res) => {
            // console.log(res);
            if (res.success) {
              this.WebparkOrderInfo = res.result
              resolve(true)
            }
          })
          .catch((e) => {
            reject(false)
          })
          .finally((_) => {
            console.log(this.WebparkOrderInfo)
          })
      })
    },
    manualoutenterMethod() {
      let { autoMatchingParams } = this
      this.webActionMethod = ''
      if (autoMatchingParams.plateNo.length < 3 && isEmpty(this.notPlateNo)) {
        this.$notification['warning']({ message: '温馨提示', description: '请输入至少三位车牌' })
        return
      } else if (!isEmpty(this.webActionMethod)) {
        return
      }
      this.$nextTick((_) => {
        this.normalOutEnterQueue.splice(0, 1, autoMatchingParams)
        this.webActionExecuteQueue.splice(0, 1, 'matchingoutenter')
      })

      // this.autoMatchingEnterLogForCurrentOutCar()

      console.log(this.webActionExecuteQueue)
    },
    // 无入场记录模糊匹配
    autoMatchingEnterLogForCurrentOutCar() {
      let { autoMatchingParams } = this

      // this.emptywebsocketaction()
      !isEmpty(this.notPlateNo) && (autoMatchingParams.plateNo = '无牌车')
      // this.WebparkOrderInfo = {}
      this.WebparkOrderInfo.plateNo = autoMatchingParams.plateNo

      getAction('/sentryBox/inParkingCar/autoMatchingEnterLogForCurrentOutCar', autoMatchingParams)
        .then((res) => {
          if (res.success && res.result.records.length >= 1) {
            let result = res.result,
              { pages, current } = result
            this.matchingRightIconShow = this.matchingLeftIconShow = true
            if (isEmpty(pages - current)) {
              current > 1 && (this.matchingRightIconShow = false)
              current == 1 && (this.matchingRightIconShow = this.matchingLeftIconShow = false)
            } else if (current == 1) {
              this.matchingLeftIconShow = false
            }

            this.openwebsocketaction('matchingoutenter')

            this.matchingArray = res.result.records

            this.againChargeForCurrentOutCar()
            return
          }

          this.$notification['warning']({ message: '温馨提示', description: '未查询到入场记录' })
          this.emptywebsocketaction()
          this.repairoutenter = true
          this.againChargeParams.enterDate = autoMatchingParams.timeStart
        })
        .finally((_) => {})
    },

    // 自定义起始截止时间
    inquireParamTime(event) {
      this.inquireParams.timeStart = ''
      this.inquireParams.timeEnd = ''
      !isEmpty(event) && (this.inquireParams.timeStart = moment(event[0]).format('YYYY-MM-DD') + ' 00:00:00')
      !isEmpty(event) && (this.inquireParams.timeEnd = moment(event[1]).format('YYYY-MM-DD') + ' 23:00:00')
    },
    // 关闭刷新监控视频
    closeMonitoring() {
      let { CameraType } = this,
        method = CameraType == 0 ? 'closeWebSocketMonitor' : 'resetVlcMonitor'
      this[method]()
    },
    // 刷新vlc监控
    resetVlcMonitor() {
      let mainLeft = document.getElementsByClassName('left__monitor')[1],
        i = 0

      while (mainLeft.children.length > i) {
        mainLeft.insertBefore(mainLeft.children[i], mainLeft.childNodes[i])
        i++
      }
    },
    // 关闭WebSocket监控
    closeWebSocketMonitor() {
      let i = 0
      while (this.WebSockets.length > i) {
        this.WebSockets[i].forceClose = true
        this.WebSockets[i].timerClean && this.WebSockets[i].timerClean()
        this.WebSockets[i].close && this.WebSockets[i].close()
        i++
      }

      this.serverWS.close && this.serverWS.close()
    },
    // 请求换班
    requestWorkChenge() {
      let _self = this,
        encryptedString,
        { username, password, remark } = this.workchangeparams,
        detection = {
          username: '请选择操作员',
          password: '请输入密码',
          remark: '请输入交班备注',
        }

      apiParamsDetection({ username, password, remark }, detection, this)
        .then((res) => {
          return getEncryptedString()
        })
        .then((data) => {
          encryptedString = data
          password = encryption(password, encryptedString.key, encryptedString.iv)

          return postAction('/operationLog/parkHandOverLog/handOver', { username, password, remark })
        })
        .then((res) => {
          if (res.success) {
            let result = res.result,
              userInfo = result.userInfo,
              commit = this.$store.commit
            Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
            Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
            commit('SET_TOKEN', result.token)
            commit('SET_INFO', userInfo)
            commit('SET_NAME', {
              username: userInfo.username,
              realname: userInfo.realname,
              welcome: welcome(),
            })
            commit('SET_AVATAR', userInfo.avatar)
            _self.closeMonitoring()
            _self.dataInit()
          }
        })
        .catch((err) => {
          console.log(err)
        })
      return
    },
    // 打开换班model
    workchangeopen() {
      return new Promise((resolve, reject) => {
        let { userInfo } = this,
          userId = userInfo.id,
          _self = this,
          workchangeparams = {
            username: undefined, //操作员
            password: '',
            remark: '',
          }
        this.workchangeparams = workchangeparams
        getAction('/operationLog/parkHandOverLog/getHandOverData', { userId })
          .then((res) => {
            if (res.success) {
              _self.workchangedata = res.result
              _self.workchangedata.nowtime = moment().format('YYYY-MM-DD HH:mm:ss')
              _self.workchangemodel = true
            }

            resolve(true)
          })
          .catch((e) => {
            console.log(e)
          })
          .finally((_) => {
            console.log(_self.workchangedata)
          })
      })
    },

    // 修正备注
    editplatenoremark(value) {
      this.$nextTick((_) => {
        this.editPlateParams.remark = value
      })
      console.log(this.editPlateParams)
    },
    // 修正重置
    reseteditplate() {
      this.$nextTick((_) => {
        this.editPlateParams.plateNo = ''
        this.editPlateParams.remark = ''
        this.editPlateParams.pcColor = ''
        this.platecolornumber = 0
      })
    },
    // 内部车辆修正车牌接口
    editPlateNo(id) {
      let editPlateParams = filterObj(this.editPlateParams),
        remark = this['edit_plateno_remark'].find((e) => e.value == editPlateParams.remark),
        eleInParkingCarList
      editPlateParams.pcColor = this.cpys[this.platecolornumber]
      editPlateParams.id = id
      remark && (editPlateParams.remark = remark.text)
      putAction('/sentryBox/inParkingCar/editPlateNo', editPlateParams).then((res) => {
        if (res.success) {
          eleInParkingCarList = this.data.inParkingCarList.find((e) => e.id == id)
          this.editPlateParams.plateNo &&
            (eleInParkingCarList.plateNo = this.editPlateParams.plateNo ? this.editPlateParams.plateNo : '无牌车')
          this.editPlateParams.pcColor &&
            (eleInParkingCarList.pcColor = this.editPlateParams.pcColor
              ? this.editPlateParams.pcColor
              : eleInParkingCarList.pcColor)
          this.editPlateParams.remark &&
            (eleInParkingCarList.remark = this.editPlateParams.remark
              ? this.editPlateParams.remark
              : eleInParkingCarList.remark)

          this.reseteditplate()
          this.editpopconfirmshow = false
          this.editindex = -1
          this.$notification.success({
            message: '提示',
            description: `车牌修正成功`,
          })
        }
      })
    },
    // 修改车牌颜色
    platealtercolor(value) {
      this.$nextTick((_) => {
        this.platecolornumber = parseInt(value)
      })
    },
    // 打开出场缴费绑定键盘操作
    outenterkeyboardaction(event) {
      switch (event.keyCode) {
        case 32:
          if (this.repairoutenter || this.repairoutenterMain || this.cancelOutenterModal) return
          this.payOutMethod()
          break
      }
    },
    // 打开正常入场绑定键盘操作
    normalenterkeyboardaction(event) {
      switch (event.keyCode) {
        case 81:
          event.returnValue = false
          console.log('取消放行')
          this.enterReject()
          break
        case 32:
          console.log('确认放行')
          this.enterAllow()
          break
      }
    },

    // 查询记录重置
    inquiryReset() {
      return new Promise((resolve, reject) => {
        this.inquireParamsTime = ['', '']
        this.$nextTick((_) => {
          this.inquireTimeradio = '2'
          this.inquireParams = {
            plateNo: '',
            serialNo: undefined,
            armName: undefined, // 车辆入出场地点
            timeStart: '', // 车辆入出场开始时间、月租到期开始时间
            timeEnd: '', // 车辆入结束时间、月租到期结束时间
            enterType: '', //	（入场类型：0：默认 1：重复入场 2：手动入场 3：补录入场）
            isOut: '', //车辆状态 0: 在场 1:已出场
            outerType: '', //	outerType （1 : 正常出场 2：手动出场 3：补录场内）
            monthlyStatus: '', //月租状态 (1、正常 2、报停 3、注销 4、过期)
            sysUserName: undefined, //	操作员账号
            packageId: undefined,
          }
          this.inquiryMethod().then((_) => {
            resolve(true)
          })
        })
      })
    },
    // 点击菜单查询记录
    inquiryMethod() {
      return new Promise((resolve, reject) => {
        let method = [...this.record][0],
          that = this
        !that.isUfold && (method += 'Down')

        that.$nextTick((_) => {
          that.$refs[method].inquiryMethod().then((_) => {
            resolve(true)
          })
        })
      })
    },

    // 点击时间单选框
    inquireTimeChang(event) {
      let { target } = event
      this.inquireTimeradio = target.value
    },
    //获取场内车辆记录
    getInParkingCarList() {
      let inParkingCarParams = this.inParkingCarParams
      getAction('/sentryBox/parkCarRecord/inParkingCarList', inParkingCarParams)
        .then((res) => {
          inParkingLoad = false
          if (isEmpty(res.result.records)) return

          let i = 0,
            records = Array()
          while (res.result.records.length > i) {
            let data = res.result.records[i]
            data.plateNo = data.plateNo ? data.plateNo : '无牌车'
            data.carTypeName = data.carTypeName ? data.carTypeName : '无'
            records.push(data)
            i++
          }

          this.data.inParkingCarList = [...this.data.inParkingCarList, ...records]

          this.inParkingCarParams.pageNo++
        })
        .catch((e) => {
          console.log(e)
        })
        .finally((_) => {
          this.inParkingLoad = inParkingLoad
        })
    },
    // 场内车辆刷新
    parkintrarefresh() {
      this.data.inParkingCarList = Array()
      this.inParkingCarParams.pageNo = 1
      this.getInParkingCarList()
    },
    // 获取交接班操作员列表
    getHandOverUserList() {
      getAction('/sentryBox/getHandOverUserList').then((workuser) => {
        if (workuser.success) {
          let workoperatoroptions = Array(),
            workuserlist = workuser.result,
            i = 0

          while (workuserlist.length > i) {
            workoperatoroptions.push({
              label: workuserlist[i].realname,
              value: workuserlist[i].username,
            })
            i++
          }

          this.workoperatoroptions = [{ label: '全部', value: undefined }, ...workoperatoroptions]
          return
        }
      })
    },
    // 获取月租列表
    getMonthlyPackageInfoList() {
      this.MonthlyPackage = Array()
      getAction('/monthlyPackageInfo/getMonthlyPackageInfoList', {})
        .then((res) => {
          if (res.success) {
            let result = res.result,
              i = 0
            while (result.length > i) {
              this.MonthlyPackage.push({ value: result[i].id, label: result[i].packageName })
              i++
            }
          }
        })
        .catch((e) => {
          console.log(e)
        })
        .finally((_) => {})
    },
    // 数据初始化
    dataInit() {
      return new Promise((resolver, reject) => {
        this.webActionExecuteQueue.splice()
        let userInfo = Vue.ls.get('Login_Userinfo'),
          workstationId = Vue.ls.get('WORKID'),
          userId = userInfo.id,
          { inParkingCarParams } = this
        inParkingCarParams.pageNo = 1

        console.log(userId, workstationId)
        Promise.all([
          getAction('/parking/parkArmInfo/getData', { userId, workstationId }), //获取监控中心数据
          getAction('/sentryBox/parkCarRecord/inParkingCarList', inParkingCarParams), //获取场内车辆记录
        ])
          .then((res) => {
            this.getMonthlyPackageInfoList()
            let monitoringData = res[0].result,
              inParkingCarList = res[1].result.records,
              cti = 0, // 车辆类型
              MEAi = 0 // 手动入场闸道下拉manualEnterAmrs
            this.monitoringData = monitoringData //监控中心数据
            this.data.inParkingCarList = inParkingCarList // 场内车辆记录

            this.CameraType = monitoringData.CameraType

            while (monitoringData.carType.length > cti) {
              this.carTypeOption.push({
                label: monitoringData.carType[cti].carTypeName,
                value: monitoringData.carType[cti].id,
              })
              cti++
            }

            this.parkName = monitoringData.parkName //停车场名称
            this.totalParkSpace = monitoringData.totalParkSpace //总停车位信息
            this.remainingPark = monitoringData.remainingPark //	剩余车位数量
            this.parkSpace = monitoringData.parkSpace //场内临时车数量
            this.parkSpaceLong = monitoringData.parkSpaceLong // 场内固定车数量
            this.parkSpaceOther = monitoringData.parkSpaceOther //场内其他车数量
            this.upTime = monitoringData.HandOverLog.upTime //上班时间

            this.HandOverLogDispose(monitoringData.HandOverLog)
            this.allParkArm = monitoringData.allParkArm // 全部监控
            this.parkArm = monitoringData.parkArm.slice(0, 8) // 需要展示的监控 最多展示六个窗口

            this.monitornumber = monitoringData.parkArm.length // 监控窗口数

            this.enterAmrOptions = Array()

            // 入场
            this.enterArmNameOptions = this.allParkArm
              .filter((e) => e.armType == 0)
              .map((itme) => {
                this.enterAmrOptions.push({
                  label: itme.armName,
                  value: itme.serialNo,
                })
                return {
                  value: itme.serialNo,
                  label: itme.armName,
                  parkCode: itme.parkCode,
                  parkArmName: itme.armName,
                  id: itme.id,
                }
              })
            // 出场
            this.outArmNameOptions = this.allParkArm
              .filter((e) => e.armType == 1)
              .map((itme) => {
                return {
                  value: itme.serialNo,
                  label: itme.armName,
                  parkCode: itme.parkCode,
                  parkArmName: itme.armName,
                  id: itme.id,
                }
              })

            this.enterArmNameOptions.unshift({ value: '', label: '全部' })
            this.outArmNameOptions.unshift({ value: undefined, label: '全部' })

            this.armSelectOptions = this.allParkArm.map((item) => {
              return {
                value: item.id,
                label: item.armName,
                disabled: this.parkArm.findIndex((e) => e.id == item.id) != -1,
              }
            })
            console.log(this.enterArmNameOptions);
            this.CameraType == 0 &&
              this.$nextTick(() => {
                this.WebSockets = []
                this.parkArm.forEach((parkArm, index) => {
                  if (parkArm) {
                    let screenWs = new ScreenWs(parkArm, index, this)
                    screenWs.init()
                  }
                })
              })

            inParkingCarParams.pageNo++

            this.getInParkingCarList()

            resolver({ userId, workstationId })
          })
          .catch((e) => {
            // console.log(e)

            reject(e)
          })
          .finally((_) => {
            this.userInfo = userInfo
            this.workchangemodel = false
            this.initDictConfig('edit_plateno_remark')
            this.initDictConfig('free_out_remark')
            this.initDictConfig('cancel_out_remark')
            this.initDictConfig('manual_open_remark')
            this.getHandOverUserList()
            this.serverWSCreate()
            this.closeEvents()

            this.$nextTick((_) => {
              monitorWindow()
              // window.document.body.clientWidth != window.screen.width && this.loginOut()
              window.onresize = () => monitorWindow()

              elementScroll(document.getElementById('myDetail__vessel'), (_) => {})
            })
          })
      })
    },
    HandOverLogDispose(HandOverLog) {
      this.freeOut = HandOverLog.freeOut //免费放行数
      this.abnormalOut = HandOverLog.abnormalOut //异常放行数
      this.normalFeeOut = HandOverLog.normalFeeOut //正常收费放行数
      this.normalNoFeeOut = HandOverLog.normalNoFeeOut //	正常自动放行数
      this.allOutNum = HandOverLog.allOutNum //	总放行数
      this.manualReceivable = HandOverLog.manualReceivable //人工应收
      this.onlineReceivable = HandOverLog.onlineReceivable //电子应收
      this.manualPaid = HandOverLog.manualPaid //人工实收
      this.onlinePaid = HandOverLog.onlinePaid //电子实收
      this.manualFree = HandOverLog.manualFree //	人工免费
      this.onlineFree = HandOverLog.onlineFree //	电子免费
      this.manualDeduction = HandOverLog.manualDeduction //	人工抵扣费用

      this.workName = HandOverLog.workName //	工作站
      this.realName = HandOverLog.realName //	操作员
    },

    initDictConfig(value) {
      //初始化字典 - 性别
      initDictOptions(value).then((res) => {
        if (res.success) {
          this[value] = res.result
        }
      })
    },

    armSelectorChange(armId, index) {
      //切换车道
      //armId,新车道id
      //先更换一下新旧车道的mac，更换成功的话，再走切换监控的逻辑
      this.saveArmMac(armId, index, this.userInfo.id)
    },
    saveArmMac: function (newArmId, index) {
      let params = {
          newArmId: newArmId,
          oldArmId: this.parkArm[index].id,
        },
        arm,
        newArm,
        newOptions,
        { CameraType } = this
      postAction('/parking/parkArmInfo/saveArmMac', params).then((res) => {
        if (res.code === 200) {
          if (CameraType == 0) {
            console.log('更改成功')
            //查找将要显示的车道
            arm = this.allParkArm.find((item) => item.id === newArmId)
            newArm = { ...arm }
            //限制当前出口车道数量不能超过2个
            if (this.currentOutArmScreenNum >= 2 && arm.armType === '1') {
              this.$message.info('出口车道最多只能显示两个')
              return
            }
            //断开当前车道视频连接
            this.WebSockets[index].close()
            // 更改armSelectOptions数据,把新车道设为disabled=true,原车道设为false
            newOptions = [...this.armSelectOptions]
            newOptions.forEach((item) => {
              if (item.value === this.parkArm[index].id) {
                item.disabled = false
              } else if (item.value === newArm.id) {
                item.disabled = true
              }
            })
            this.armSelectOptions = newOptions
            // 更新数据,使页面ui响应
            this.parkArm.splice(index, 1, newArm)
            // 建立新的websock连接
            let ws = new ScreenWs(newArm, index, this)
            ws.create()
            //更新websocket数组
            this.WebSockets.splice(index, 1, ws)
            // console.log(this.WebSockets)
            return
          }

          //操作成功
          console.log('更改成功')
          //查找将要显示的车道
          arm = this.allParkArm.find((item) => item.id === newArmId)
          newArm = { ...arm }
          //限制当前出口车道数量不能超过2个
          if (this.currentOutArmScreenNum >= 2 && arm.armType === '1') {
            this.$message.info('出口车道最多只能显示两个')
            return
          }
          newOptions = [...this.armSelectOptions]
          newOptions.forEach((item) => {
            if (item.value === this.parkArm[index].id) {
              item.disabled = false
            } else if (item.value === newArm.id) {
              item.disabled = true
            }
          })
          this.armSelectOptions = newOptions
          let mainLeft = document.getElementsByClassName('left__monitor')[1]
          this.parkArm[index] = arm
          mainLeft.insertBefore(mainLeft.children[index], mainLeft.childNodes[index])
        } else {
          this.$message.info('操作失败')
        }
      })
    },

    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    showManualIn() {
      this.vmanualIn = true
    },
    manualOk(e) {
      console.log(e)
      this.vmanualIn = false
    },
    showManualoutenter(armid, serialNo) {
      console.log(serialNo)
      this.WebparkOrderInfo = {}
      this.emptywebsocketaction()
      this.manualoutenter = true
      this.manualserialNo = serialNo
    },
    fullscreen() {
      return new Promise((resolut, reject) => {
        let fullscreenEnabled =
            document.fullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.msFullscreenEnabled ||
            undefined,
          _self = this

        if (fullscreenEnabled) {
          let de = document.documentElement
          //打开全屏
          if (de.requestFullscreen) {
            de.requestFullscreen().then(
              (status) => {
                // 正常打开全屏不需要任何操作
                console.log('正常打开全屏')
                // do something
              },
              (err) => {
                console.log('不正常打开全屏')
                // do something
              }
            )
          } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen()
          } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen()
          }
        } else {
          console.log('无法打开全屏')
        }

        document.addEventListener('keydown', this.preventKeyDown)

        // if (navigator.keyboard && navigator.keyboard.lock) {
        //   navigator.keyboard.lock(['Escape', 'F11'])
        // } else {
        //   alert('您的浏览器上不支持该功能,只在https模式（或localhost和本地文件）下支持')
        // }

        resolut(true)
      })
    },
    closeWebSocket() {
      console.log(this.WebSockets)
      this.WebSockets.forEach((item) => {
        item.forceClose = true
        item.timerClean && item.timerClean()
        item.ws && item.ws.close && item.ws.close()
      })
      // this.serverWSHeartCheck.reset()
      this.serverWsForceClose = true
      this.serverWS && this.serverWS.close()
      this.$nextTick((_) => {
        window.location.reload()
      })
    },
    parkArmStateChange(parkArm, parkArmIndex, noScreen) {
      parkArm.noScreen = noScreen
      this.parkArm.splice(parkArmIndex, 1, Object.assign({}, parkArm))
    },
    preventKeyDown(e) {
      switch (e.keyCode) {
        case 18:
          e.preventDefault()
          e.returnValue = false
          break
        case 27:
          e.preventDefault()
          e.returnValue = false
          break
        case 122:
          e.preventDefault()
          e.returnValue = false
          break
        case 17:
          e.preventDefault()
          e.returnValue = false
          break
        // case 82:
        //   e.preventDefault()
        //   e.returnValue = false
        //   break
        case 8:
          // e.preventDefault()
          // e.returnValue = false
          break
        default:
          break
      }
      console.log('keyCode=' + e.keyCode + '; key=' + e.key)
      return false
    },
    closeEvents() {
      document.removeEventListener('keydown', this.outenterkeyboardaction) // 移除监听出场按键
      document.removeEventListener('keydown', this.normalenterkeyboardaction) // 移除监听入场按键
      this.webActionMethod = ''
      this.normalOutEnterQueue = Array()
      this.affirmEnterQueue = Array()
      this.webActionExecuteQueue = Array()
    },
  },
  mounted() {},
  created() {
    let _self = this,
      workUserId = Vue.ls.get('Login_Userinfo').id,
      workStationId = Vue.ls.get('WORKID')

    getAction('sentryBox/refreshCheckInformation', { workUserId, workStationId })
      .then((res) => {
        if (res.code == 500) {
          _self.loginOut()
          console.log('工作站已在线')
          return
        }

        return _self.fullscreen()
      })
      .then((_) => {
        return _self.dataInit()
      })
      .then((_) => {
        elementScroll(document.getElementById('tablebox'), (res) => {
          _self.getInParkingCarList()
        })
      })

    // _self.fullscreen().finally((_) => {
    //   _self
    //     .dataInit()
    //     .then((res) => {
    //       let workUserId = res.userId,
    //         workStationId = res.workstationId
    //       return getAction('sentryBox/refreshCheckInformation', { workUserId, workStationId })
    //     })
    //     .then((res) => {})
    //   // document.onfullscreenchange = () => {
    //   //   if (!document.fullscreenElement) {
    //   //     console.log(_self.$route.name)
    //   //     if (_self.$route.name === 'Watchhouse') {
    //   //       _self.$nextTick((_) => {
    //   //         _self.dataInit()
    //   //       })
    //   //     }
    //   //   }
    //   // }
    //   elementScroll(document.getElementById('tablebox'), function (res) {
    //     _self.getInParkingCarList()
    //   })
    // })
  },
  beforeDestroy() {
    this.closeEvents()
    document.removeEventListener('keydown', this.preventKeyDown) // 移除监听按键
    this.resetManualEnterParamsMethod()
    this.webActionExecuteQueue.splice()
    document.documentElement.style.fontSize = "0px";
  },
}
function monitorWindow() {
  let unfoldele = document.getElementById('unfold'),
    pagemainele = document.getElementsByClassName('main')[0],
    i = 0,
    Elementmonitoring = document.getElementsByClassName('item__monitoring') // 监控窗口

  pagemainele.getElementsByClassName('right__detail')[0].setAttribute('style', '')
  unfoldele.setAttribute('style', `display:none;`)
  while (i < Elementmonitoring.length) {
    Elementmonitoring[i].setAttribute('style', '')
    i++
  }
  i = 0

  let elementMonitor = document.getElementById('monitor'), // 监控容器
    monitorWidth = elementMonitor.offsetWidth, // 监控容器宽度
    monitorHeigth = elementMonitor.offsetHeight, // 监控容器高度度
    monitoringlength = Elementmonitoring.length, // 监控窗口总个数
    rownumber = Math.ceil(monitoringlength / 2), // 每行监控窗口个数
    widthDutycycles = monitorWidth - 28, //
    heightDutycycles = monitorHeigth - 20, //
    eleWidth = widthDutycycles / rownumber, // 窗口宽度
    eleHeight = heightDutycycles / 2, //窗口高度
    countby = (rownumber - 1) * 2, // 需要间隔的元素总个数
    interval = (28 / countby).toFixed(2), // Math.ceil()元素间隔尺寸
    contentOrderWidth = 0,
    pagefooterele,
    pageMainStyle,
    unfoldHeigth
  console.log(
    monitoringlength, // 监控视频窗口个数
    monitorHeigth, // 监控视频窗口容器高度
    monitorWidth, // 监控视频窗口容器宽度
    rownumber, // 监控窗口个数
    widthDutycycles,
    eleWidth,
    eleHeight,
    countby,
    interval
  )

  if (monitoringlength > 2) {
    while (monitoringlength > i) {
      let styleStr = `width:${eleWidth}px;`
      rownumber <= i && (styleStr += `margin-top: 20px;`) //height:${eleHeight}px;
      i != 0 && rownumber != i && (styleStr += `margin-left: ${interval}px;`)
      Elementmonitoring[i].setAttribute('style', styleStr)
      i++
    }
    contentOrderWidth = interval * (rownumber - 1) + eleWidth * rownumber
  } else if (monitoringlength == 2) {
    while (monitoringlength > i) {
      let styleStr = `width:${eleWidth / 2}px;height:${heightDutycycles + 20}px;`
      rownumber <= i && (styleStr += `margin-left: ${(28 / 2).toFixed(2)}px;`)
      Elementmonitoring[i].setAttribute('style', styleStr)
      i++
    }
    contentOrderWidth = widthDutycycles + 28 / 2
  } else if (monitoringlength == 1) {
    while (monitoringlength > i) {
      let styleStr = `width:${eleWidth}px;height:${heightDutycycles + 20}px;`
      Elementmonitoring[i].setAttribute('style', styleStr)
      i++
    }
    contentOrderWidth = eleWidth
  }

  document.getElementById('content__order').setAttribute('style', `width:${contentOrderWidth}px`)
  pagefooterele = document.getElementById('footer')
  if (window.getComputedStyle) {
    pageMainStyle = getComputedStyle(pagemainele, null)
  } else {
    pageMainStyle = pagemainele.currentStyle //兼容IE的写法
  }
  pagemainele.getElementsByClassName('right__detail')[0].setAttribute('style', `height:${pagemainele.offsetHeight}px;`)
  console.log(pagemainele, pagefooterele)
  unfoldHeigth =
    parseInt(pageMainStyle.marginTop.replace('px', '')) + pagemainele.offsetHeight + pagefooterele.offsetHeight

  unfoldele.setAttribute('style', `width:${contentOrderWidth}px;display:none;height:${unfoldHeigth}px;`)
}
function ScollPostion(element) {
  return new Promise((resolut, reject) => {
    var t, l, w, h
    if (element && element.scrollTop) {
      t = element.scrollTop
      l = element.scrollLeft
      w = element.scrollWidth
      h = element.scrollHeight
    } else if (document.body) {
      t = document.body.scrollTop
      l = document.body.scrollLeft
      w = document.body.scrollWidth
      h = document.body.scrollHeight
    } else {
      reject(false)
      return
    }
    resolut({
      top: t,
      left: l,
      width: w,
      height: h,
    })
  })
}
function elementScroll(element, callback) {
  if (!element) return
  // element = document.getElementById('tablebox'),
  let elementHeigth = element.offsetHeight,
    // 触底
    obj = { _isGrounding: false }
  element.setAttribute('style', 'overflow-x: hidden;overflow-y: scroll;')
  var scrollFunc = function (e) {
    e = e || window.event
    if (e.wheelDelta) {
      //第一步：先判断浏览器IE，谷歌滑轮事件
      if (e.wheelDelta > 0) {
        //当滑轮向上滚动时
        // console.log('滑轮向上滚动')
      }
      if (e.wheelDelta < 0) {
        //当滑轮向下滚动时
        ScollPostion(element).then((res) => {
          let { top, height } = res
          height - top - elementHeigth < elementHeigth && callback(true)
        })
      }
    } else if (e.detail) {
      //Firefox滑轮事件
      if (e.detail > 0) {
        //当滑轮向上滚动时
        console.log('滑轮向上滚动')
      }
      if (e.detail < 0) {
        //当滑轮向下滚动时
        console.log('滑轮向下滚动')
      }
    }
  }
  if (element.addEventListener) {
    //firefox
    element.addEventListener('DOMMouseScroll', scrollFunc, false)
  }
  //滚动滑轮触发scrollFunc方法 //ie 谷歌
  element.onmousewheel = scrollFunc
}
document.oncontextmenu = function (event) {
  if (window.event) {
    event = window.event
  }
  try {
    var the = event.srcElement
    if (!((the.tagName == 'INPUT' && the.type.toLowerCase() == 'text') || the.tagName == 'TEXTAREA')) {
      return false
    }
    return true
  } catch (e) {
    return false
  }
}
</script>

<style scoped lang="less">
.canceloutenter {
  text-align: center;
  font-size: 0.33rem;
  font-family: MicrosoftYaHei;
  color: #333333;
}
/deep/ .monitorScreenDialog {
  .screenImg {
    width: 100%;
    height: 100%;
  }
  .right {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
  }
  .ant-modal-content {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
  }
  .ant-modal-body {
    width: 100%;
    padding: 0;
    text-align: center;
    background-color: inherit;
  }
}
/deep/.ant-modal-content {
  width: 10rem;
  margin-left: -1.75rem;
}
/deep/.ant-modal-footer {
  text-align: center;
  button.ant-btn.ant-btn-primary {
    margin-left: 0.5rem;
  }
}
/deep/.ant-modal-body {
  .top1,
  .top2 {
    margin-left: 2.13rem;
    margin-bottom: 0.29rem;
    display: flex;
    align-items: center;
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      img {
        margin-right: 0.25rem;
      }
      span {
        display: inline-block;
        width: 1.88rem;
      }
      .title {
        font-weight: 600;
        font-size: 0.23rem;
      }
    }
  }
  .middle {
    display: flex;
    justify-content: space-around;
    table {
      th,
      td {
        width: 2.25rem;
        height: 0.68rem;
        text-align: center;
      }
      th {
        font-size: 0.23rem;
        background-color: #f5f5f5;
        color: #333333;
      }
      td {
        font-size: 0.2rem;
        color: #666666;
      }
    }
  }
  .bottom {
    font-size: 0.2rem;
    margin: 0 auto;
    margin-top: 0.25rem;
    table {
      margin: 0 auto;
      tr {
        .lable {
          text-align: right;
        }
        .ant-select,
        .ant-input {
          width: 2.5rem;
        }
        td {
          padding-bottom: 0.15rem;
        }
      }
    }
  }

  .button {
    margin: 0 auto;
    margin-top: 0.25rem;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ant-btn {
      font-size: 0.25rem;
      width: 1.63rem;
      height: 0.63rem;
      border-radius: 0.13rem;
    }
  }

  .sdrcCon {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.64rem;
    > div {
      margin-bottom: 0.25rem;
      span {
        display: inline-block;
        width: 1.13rem;
        height: 0.31rem;
      }
      select,
      input {
        width: 3.88rem;
      }
      .btn {
        width: 3.88rem;
        button {
          width: 1.13rem;
          height: 0.5rem;
          outline: none;
          margin-right: 0.25rem;
          margin-bottom: 0.13rem;
        }
        button:nth-child(1) {
          background-color: #2490ff;
          border: 0.01rem solid #2490ff;
          color: #fff;
        }
        button:nth-child(2) {
          background-color: #f7da00;
          border: 0.01rem solid #f7da00;
        }
        button:nth-child(3) {
          background-color: #fff;
          border: 0.01rem solid #666;
        }
        button:nth-child(4),
        button:nth-child(5) {
          background-color: #35b37e;
          border: 0.01rem solid #35b37e;
          color: #fff;
        }
        button:nth-child(6) {
          background-color: #333;
          border: 0.01rem solid #333;
          color: #fff;
        }
        button:nth-child(3),
        button:nth-child(6) {
          margin-right: 0rem;
        }
        button:active {
          border: 0.01rem solid #000;
        }
      }
    }
    > div:nth-child(3) {
      display: flex;
      align-items: flex-start;
    }
    > div:nth-child(4) {
      margin-bottom: 0;
    }
  }
  .enterContent {
    display: flex;
    justify-content: center;
    font-size: 0.23rem;
    color: #333333;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    table {
      tr {
        padding: 0.19rem;
        display: block;
        .label {
          width: 1.25rem;
          text-align: right;
        }
        .value {
          font-size: 0.2rem;
          width: 3.88rem;
          .ant-select,
          .ant-input {
            width: 100%;
          }
        }
        .platecolor {
          display: flex;
          flex-wrap: wrap;
          position: relative;
          left: 1.25rem;
          top: -0.44rem;
          .coloritem {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.13rem;
            border: 0.01rem solid #666666;
            margin: 0.1rem 0.06rem;
            height: 0.5rem;
            border-radius: 0.05rem;
            position: relative;
            .ck {
              position: absolute;
              bottom: 0.05rem;
              right: 0.05rem;
              width: 0.15rem;
              height: 0.15rem;
              border-radius: 50%;
              background-color: #fff;
              display: none;
              &[data-ck] {
                display: block;
              }
            }
          }

          .coloritem[data-index='0'] {
            background-color: #2490ff;
            color: #fff;
            border-color: #2490ff;
          }
          .coloritem[data-index='1'] {
            background-color: #f7da00;
            color: #fff;
            border-color: #f7da00;
          }
          .coloritem[data-index='2'] {
            .ck {
              background-color: #2490ff;
            }
          }
          .coloritem[data-index='3'] {
            background-color: #35b37e;
            color: #fff;
            border-color: #35b37e;
          }
          .coloritem[data-index='4'] {
            background-color: #35b37e;
            color: #fff;
            border-color: #35b37e;
          }
          .coloritem[data-index='5'] {
            background-color: #333333;
            color: #fff;
            border-color: #333333;
          }
        }
      }
    }
  }
}
/deep/.ant-select-dropdown {
  z-index: 9991;
}

body {
  overflow-y: auto;
}
// @media screen and (max-device-width: 18rem) {
//   .maintorPage {
//     .main {
//       .mainRightHeader,
//       .carModalRightHeader,
//       .noEnterRecord {
//         font-size: 0.25rem;
//       }
//     }
//   }
// }

// @media screen and (max-device-width: 13.5rem) {
//   .maintorPage {
//     .main {
//       .mainRightHeader,
//       .carModalRightHeader,
//       .noEnterRecord {
//         font-size: 0.2rem;
//       }
//     }
//   }
// }
@media screen and (max-device-width: 1440px) {
  #footer {
    .left__order {
      .content__order {
        .top__content {
          .right {
            /deep/ .ant-popover {
              left: 12.65rem !important;
              .ant-popover-content {
                width: 5.2rem !important;
                .ant-popover-inner {
                  height: 3.2rem !important;
                }
                .ant-popover-message-title {
                  table {
                    // text-align: center;
                    margin: 0 auto;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .adapth_ide {
    display: none;
  }
}

.maintorPage {
  color: #2490ff;
  padding: 0.21rem 0.5rem;
  background-color: #171e30;
  min-height: 100%;
  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  min-width: 1280px;
  // min-height: 720px;
  // 按钮
  /deep/ .ant-btn {
    font-size: 0.175rem !important;
    height: 0.4rem;
    line-height: 1 !important;
  }

  // 选择框
  /deep/ .ant-select-selection--single {
    font-size: 0.15rem !important;
    height: 0.4rem !important;
    .ant-select-selection__rendered {
      line-height: 0.36rem;
    }
  }
  // 菜单
  /deep/ .ant-menu-horizontal {
    line-height: 0.575rem !important;
  }
  /deep/ .ant-menu {
    .ant-menu-item {
      padding: 0rem;
      margin-right: 0.9rem;
    }
  }
  // 输入框
  /deep/ .ant-input {
    height: 0.4rem !important;
    font-size: 0.15rem !important;
    line-height: 1 !important;
  }
  // 单选
  /deep/ .ant-radio-group {
    .ant-radio-wrapper {
      font-size: 0.175rem !important;
      .ant-radio {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%);
      }
      span.ant-radio {
        & + * {
          padding-left: 0.28rem !important;
        }
      }
      .ant-radio-inner {
        width: 0.2rem !important;
        height: 0.2rem !important;
        &::after {
          width: 0.1rem !important;
          height: 0.1rem !important;
          left: 50% !important;
          top: 50% !important;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  // 悬浮框
  /deep/ .ant-popover-message {
    font-size: 0.175rem !important;
  }

  .header {
    width: 100%;
    display: flex;

    justify-content: space-between;
    align-items: center;
    .left__title {
      font-size: 0.42rem;
      font-weight: bold;
      color: #ffffff;
      line-height: 0.56rem;
      letter-spacing: 0.01rem;
      background: linear-gradient(360deg, #1990ff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .poll__play {
    }
    .right__detail {
      width: 20%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  // .main.unfold {
  //   position: absolute;
  //   height: 11.94rem;
  //   overflow: hidden;
  //   z-index: 9991;
  // }

  .unfold {
    .footer {
      .unfold_order {
        .content {
          height: calc(85% - 0.69rem);
        }
      }
    }

    .unfold__top {
      display: flex;
      width: 98%;
      padding-top: 0.3rem;
      margin: 0 auto;
      height: 14%;
      .left {
        flex: 9;
        .inquire {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          tr {
            padding-bottom: 0.39rem;
            margin-right: 0.19rem;
            &:last-child {
              margin: 0;
            }
          }
          /deep/ .ant-calendar-picker {
            .ant-calendar-range-picker-input {
              &::-webkit-input-placeholder {
                color: #1990ff;
              }
              &:-moz-placeholder {
                color: #1990ff;
              }
              &::-moz-placeholder {
                color: #1990ff;
              }
              &:-ms-input-placeholder {
                color: #1990ff;
              }
            }
            .ant-calendar-range-picker-separator {
              color: #1b68d2;
            }

            .ant-calendar-picker-clear {
              color: #fff;
              background-color: transparent;
            }
          }
          /deep/ .ant-radio-wrapper {
            color: #fff;
            .ant-radio-inner {
              border-color: #2490ff;
              background-color: transparent;
            }
          }
          /deep/ .ant-input {
            background-color: transparent;
            border-color: #1b68d2;
            color: #1b68d2;
            &::-webkit-input-placeholder {
              color: #1990ff;
            }
            &:-moz-placeholder {
              color: #1990ff;
            }
            &::-moz-placeholder {
              color: #1990ff;
            }
            &:-ms-input-placeholder {
              color: #1990ff;
            }
          }
          /deep/ .ant-select {
            width: 2rem;
            .ant-select-selection--single {
              background-color: transparent;
              border-color: #1b68d2;
              .ant-select-selection__placeholder,
              .ant-select-selection-selected-value {
                color: #fff;
              }
              .ant-select-arrow {
                color: #1b68d2;
              }
            }
          }
        }
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
    }
    /deep/ .ant-pagination {
      position: absolute;
      bottom: 0.4rem;
      right: 0.35rem;
      color: #fff;
      .ant-pagination-item-link,
      .ant-pagination-item-ellipsis {
        color: #fff;
      }
      .ant-pagination-item {
        background-color: transparent;
        a {
          color: #fff;
        }
      }
      .ant-pagination-item-active {
        a {
          color: #1890ff;
        }
      }
      .ant-pagination-options-quick-jumper input {
        border-color: #1890ff;
        background-color: transparent;
        color: #fff;
      }
    }
  }

  .main {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
    position: relative;
    z-index: 2;

    .left__monitor {
      flex: 8;
      .item__monitoring {
        // width: 49%;
        float: left;
        height: 3.73rem;
        background-color: transparent;
        position: relative;
        .top__content {
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          background-color: rgba(0, 14, 62, 0.6);
          color: #fff;
          .content__box {
            font-family: MicrosoftYaHei;
            width: 96%;
            height: 0.5rem;
            margin: 0 auto;
            font-size: 0.15rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /deep/ .ant-select {
              width: 1.27rem;
              color: #fff;
              .ant-select-selection {
                background-color: transparent;
                border-color: #3572e2;
                .ant-select-arrow {
                  color: #3572e2;
                }
              }
            }
            .left,
            .right {
              display: flex;
              align-items: center;
              .icon__car {
                width: 0.19rem;
                height: 0.15rem;
              }
              .icon__fullscreen {
                width: 0.23rem;
                height: 0.23rem;
              }
              .title,
              .icon__fullscreen {
                margin-left: 0.13rem;
                margin-right: 0.13rem;
              }

              .status {
                position: relative;
                color: #35b37e;
                &::before {
                  content: ' ';
                  display: inline-block;
                  width: 0.06rem;
                  height: 0.06rem;
                  background-color: #35b37e;
                  position: absolute;
                  top: 50%;
                  left: -0.13rem;
                  transform: translateY(-50%);
                  border-radius: 50%;
                }
                &::after {
                  content: '摄像头正常运行';
                }
              }

              .status[data-anomaly='true'] {
                color: #dc3d3d;
                &::before {
                  background-color: #dc3d3d;
                }
                &::after {
                  content: '摄像头连接异常';
                }
              }

              .ant-btn {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 1.27rem;
                text-align: left;
                font-size: 0.17rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #f5f5f5;
                background-color: transparent;
                border-color: rgba(53, 114, 226, 1);
                padding: 0 0.15rem;
              }
            }
          }
        }

        .vlc {
          width: 100%;
          height: calc(100% - 0.5rem);
        }
        .websoket {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          .screenImg {
            width: 100%;
            height: 100%;
          }
          .right__button {
            display: none;
          }
          .anomaly {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .img {
              height: 35%;
            }
          }
        }
        .vlc {
          .right__button {
            display: block;
          }
        }

        .right__button {
          position: absolute;
          right: 0;
          bottom: 0.33rem;
          z-index: 1000;
          // <!-- 重新识别 -->
          //     <div class="afresh"></div>
          //     <!-- 应急开闸 -->
          //     <div class="cutoff"></div>
          //     <!-- 手动入场 -->
          //     <div class="entrance"></div>
          //     <!-- 手动出场 -->
          //     <div class="appearance"></div>
          .afresh,
          .cutoff,
          .entrance,
          .appearance {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #fff;
            width: 1.25rem;
            height: 0.38rem;
            border-radius: 1.25rem 0rem 0rem 1.25rem;
            background: #1990ff;
            margin-top: 0.13rem;
            cursor: pointer;
          }
          .afresh {
            background: #f7b500;
          }
        }
        &:hover {
          .right__button {
            display: inline-block;
          }
        }
      }
    }

    .right__detail {
      flex: 2;
      height: 7.75rem;
      /deep/ .ant-popover {
        width: 100%;
        left: 0 !important;
        .ant-popover-arrow,
        .anticon {
          display: none;
        }
        .ant-popover-message-title,
        .ant-popover-placement-bottom {
          text-align: center;
          padding: 0;
          color: #fff;
        }

        .ant-popover-inner {
          background-color: #072d69;
        }
      }
      .top__content {
        display: flex;
        width: 100%;
        height: 0.96rem;
        border-bottom: 0.01rem solid rgba(27, 104, 210, 1);
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding: 0 3%;
        .left {
          display: flex;
          align-items: center;
          font-size: 0.2rem;
          .title {
            margin-right: 0.15rem;
          }
        }
        .right {
          .button {
            cursor: pointer;
          }
        }
      }

      .center__content {
        width: 100%;
        height: calc(100% - 0.96rem);
        #tablebox {
          height: calc(100% - 0.6rem);
          &::-webkit-scrollbar {
            display: none;
          }
          /* 兼容火狐 */
          scrollbar-width: none;
          /* 兼容IE10+ */
          -ms-overflow-style: none;
          .ant-spin-spinning {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .table {
          color: #fff;
          border: none;
          font-size: 0.195rem;
          .title,
          .even {
            background: rgba(22, 45, 90, 0.6);
          }
          .title {
            font-size: 0.2rem;
            color: #1990ff;

            th {
              padding: 0.13rem 0;
            }
          }
          tr {
            border: none;
            th,
            .td {
              vertical-align: middle;
              text-align: center;
              border: none;
              width: calc(100% / 4);
              .borderb {
                border-bottom: 0.01rem solid #fff;
              }
              .ant-popover-arrow {
                display: none;
              }

              /deep/ .ant-popover {
                .ant-popover-inner-content {
                  padding: 0;
                  .ant-popover-buttons {
                    display: none;
                  }
                }
                table {
                  font-size: 0.15rem;
                  margin: 0 auto;
                  tr {
                    .label {
                      text-align: right;
                      color: #1968ff;
                    }
                    td {
                      vertical-align: middle;
                      border: none;
                    }
                    .platecolor {
                      display: flex;
                      align-items: center;
                      .before,
                      .after {
                        padding: 0.05rem 0.19rem;
                        border: 0.01rem solid #1b68d2;
                        border-radius: 0.05rem;
                      }
                      .anticon {
                        display: inline-block;
                      }

                      .ant-popover {
                        .anticon {
                          display: none;
                        }

                        table {
                          tr {
                            display: flex;
                            td {
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              width: 1.13rem;
                              height: 0.5rem;
                              margin: 0.13rem;
                              border-radius: 0.05rem;
                              border: 0.01rem solid #ffffff;
                            }
                            .colorbox {
                              position: relative;
                              .ck {
                                display: none;
                                position: absolute;
                                width: 0.15rem;
                                height: 0.15rem;
                                border-radius: 50%;
                                background-color: #fff;
                                bottom: 0.05rem;
                                right: 0.05rem;
                                img {
                                  width: 100%;
                                  height: 100%;
                                }
                                &[data-ck='true'] {
                                  display: block;
                                }
                              }
                            }
                            .colorbox[data-color='0'] {
                              border-color: #2490ff;
                              background-color: #2490ff;
                            }
                            .colorbox[data-color='1'] {
                              border-color: #f7da00;
                              background-color: #f7da00;
                              color: #000;
                            }
                            .colorbox[data-color='3'] {
                              border-color: #35b37e;
                              background-color: #35b37e;
                            }
                            .colorbox[data-color='4'] {
                              border-color: #35b37e;
                              background-color: #35b37e;
                            }
                            .colorbox[data-color='5'] {
                              border-color: #000000;
                              background-color: #000000;
                            }
                          }
                        }
                      }
                    }
                    .remark {
                      .ant-select {
                        width: 2rem;
                        .ant-select-selection--single {
                          background-color: transparent;
                          border-color: #1b68d2;
                          .ant-select-selection__placeholder,
                          .ant-select-selection-selected-value {
                            color: #fff;
                          }
                          .ant-select-arrow {
                            color: #1b68d2;
                            .anticon {
                              display: inline-block;
                            }
                          }
                        }
                      }
                    }
                  }
                }
                .button {
                  // width: 40%;
                  margin: 0.19rem auto;
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                }
              }

              .ant-input {
                width: 1.6rem;
                background-color: transparent;
                border: none;
                padding: 0;
                font-size: 0.23rem;
                color: #ffffff;
                border-bottom: 0.03rem solid #1990ff;
                border-radius: 0rem;
                .ant-calendar-range-picker-separator {
                  color: #1b68d2;
                }
                .ant-calendar-picker-clear {
                  color: #fff;
                  background-color: transparent;
                }
              }
            }

            .picture {
              width: 0.85rem;
              height: 0.36rem;
              // background-color: #fff;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .action {
        width: 100%;
        padding: 0.04rem;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;

        /deep/.ant-popover {
          table {
            tr {
              display: flex;
              td {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.13rem;
                height: 0.5rem;
                margin: 0.13rem;
                border-radius: 0.05rem;
                border: 0.01rem solid #ffffff;
              }
              .colorbox {
                position: relative;
                .ck {
                  display: none;
                  position: absolute;
                  width: 0.15rem;
                  height: 0.15rem;
                  border-radius: 50%;
                  background-color: #fff;
                  bottom: 0.05rem;
                  right: 0.05rem;
                  &[data-ck='true'] {
                    display: block;
                  }
                }
              }
              .colorbox[data-color='0'] {
                border-color: #2490ff;
                background-color: #2490ff;
              }
              .colorbox[data-color='1'] {
                border-color: #f7da00;
                background-color: #f7da00;
                color: #000;
              }
              .colorbox[data-color='3'] {
                border-color: #35b37e;
                background-color: #35b37e;
              }
              .colorbox[data-color='4'] {
                border-color: #35b37e;
                background-color: #35b37e;
              }
              .colorbox[data-color='5'] {
                border-color: #000000;
                background-color: #000000;
              }
            }
          }
          .ant-popover-buttons {
            display: none;
          }
        }

        .appear,
        .enter,
        .entering {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          background-color: rgba(7, 45, 105, 1);
          font-size: 0.2rem;
          color: #ffffff;

          /deep/ .ant-select {
            width: 1.27rem;
            color: #fff;
            .ant-select-selection {
              background-color: transparent;
              border-color: #3572e2;
              .ant-select-arrow {
                color: #3572e2;
              }
            }
          }
          table {
            .label {
              color: #1990ff;
            }
          }
        }

        // <!-- 入场 -->
        .enter {
          padding: 0.35rem 0.11rem 0.5rem;
          .hint {
            font-size: 0.23rem;
            .state {
              color: #49ffb2;
            }
            .state[data-full='true'] {
              color: #ff3500;
            }
          }
          table {
            margin-top: 0.19rem;
            margin-bottom: 0.19rem;
            .plateNo {
              font-size: 0.3rem;
              color: #49ffb2;
              font-weight: bold;
            }
            td {
              padding: 0.13rem 0;
            }
          }
          .button {
            width: 100%;
            display: flex;
            justify-content: space-between;
            /deep/ .ant-btn {
              width: 1.88rem;
              height: 0.5rem;
              border-radius: 0.07rem;
            }
          }
        }
        // <!-- 出场 -->
        .appear {
          .paydetail {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 0.11rem;
            margin-bottom: 0.25rem;
          }
          .botton {
            width: 100%;
            .top {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-bottom: 0.25rem;

              .left,
              .right {
                flex: 5;
                /deep/ .ant-select {
                  .ant-select-selection__placeholder {
                    color: #fff;
                  }
                  width: 92%;
                }
              }
              .right {
                text-align: right;
              }
            }
            .detail {
              display: flex;
              justify-content: space-between;
              font-size: 0.15rem;
              flex-wrap: wrap;
              tr {
                td {
                  padding-bottom: 0.13rem;
                }
              }
            }
          }
          table {
            .value {
              font-size: 0.38rem;
            }
          }
        }
        .appear,
        .entering {
          padding: 0.28rem 0.13rem;
          .topcontent {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0.25rem;
            border-bottom: 0.01rem solid #1b68d2;
            .left {
              font-size: 0.25rem;
              font-weight: bold;
              color: #49ffb2;
            }
          }
        }
        // <!-- 补录 -->
        .entering {
          .content {
            padding: 0.38rem 0;
            .platecolor {
              display: flex;
              align-items: center;
              .before,
              .after {
                padding: 0.05rem 0.19rem;
                border: 0.01rem solid #1b68d2;
                border-radius: 0.05rem;
              }
            }
            table {
              tr {
                td {
                  padding: 0.25rem 0;
                }
              }
              /deep/ .ant-input {
                width: 1.6rem;
                background-color: transparent;
                border: none;
                padding: 0;
                font-size: 0.23rem;
                color: #ffffff;
                border-bottom: 0.03rem solid #1990ff;
                border-radius: 0rem;
                .ant-calendar-range-picker-separator {
                  color: #1b68d2;
                }
                .ant-calendar-picker-clear {
                  color: #fff;
                  background-color: transparent;
                }
              }
            }
          }
          .button {
            width: 50%;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }

    .unfold {
      position: absolute;
      height: 11.94rem;
      overflow: hidden;
      z-index: 9991;
      margin-top: 0px !important;
      margin-bottom: 0px !important;
      // bottom: 0.12rem;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    .left__order,
    .right__myDetail {
      height: 3.92rem;
      .content__order {
        background: rgba(7, 45, 105, 0.4);
        height: 3.92rem;
      }
      .content__order.unfold_order {
        height: 100%;
      }
      .content {
        margin: 0 auto;
        height: 100%;
        overflow: hidden;
        .top__content {
          height: 0.63rem;
          border-bottom: 0.01rem solid #1b68d2;
          .ant-menu {
            background-color: transparent;
            color: #6799c8;
            font-size: 0.23rem;
            .ant-menu-item-selected {
              color: #fff;
              font-weight: bold;
            }
          }
          .ant-menu-horizontal {
            border: none;
          }
        }
      }
    }
    .left__order {
      flex: 8;
      height: 100%;
      .content__order {
        .content {
          width: 98%;
          .unfold__top {
            input::-webkit-input-placeholder {
              color: #2490ff;
              font-size: 0.15rem;
            }
            input:-moz-placeholder {
              /* FF 4-18 */
              color: #2490ff;
              font-size: 0.15rem;
            }
            input::-moz-placeholder {
              /* FF 19+ */
              color: #2490ff;
              font-size: 0.15rem;
            }
            div:nth-child(1) {
              margin-bottom: 0.39rem;
              input.search,
              select {
                color: #fff;
                outline: none;
                border: 0.01rem solid #1b68d2;
                border-radius: 0.05rem;
                width: 2rem;
                height: 0.3rem;
                margin-right: 0.38rem;
                padding-left: 0.13rem;
                background-color: rgb(23, 30, 48);
              }
              input.radio {
                margin-right: 0.05rem;
              }
              span.text {
                margin-right: 0.25rem;
              }
              button {
                width: 0.75rem;
                height: 0.38rem;
                margin-right: 0.25rem;
                font-size: 0.17rem;
                outline: none;
              }
              .btn1 {
                background-color: #2490ff;
                color: #fff;
                border: 0.01rem solid #2490ff;
              }
              .btn2 {
                background-color: rgb(23, 30, 48);
                color: #2490ff;
                border: 0.01rem solid #2490ff;
              }
            }
            div:nth-child(2) {
              margin-bottom: 0.45rem;
              span {
                margin-right: 0.25rem;
              }
              input {
                margin-right: 0.13rem;
              }
            }
          }
          .top__content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              display: flex;
              align-items: center;
            }
            .right {
              /deep/ .ant-popover {
                left: 13.7rem !important;
                height: 100%;
                td {
                  padding: 0.1rem 0;
                }
                .button {
                  margin: 0 auto;
                  width: 62%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                }
                .ant-popover-content {
                  width: 4.25rem;
                  height: 100%;
                  .ant-popover-inner {
                    height: 3.2rem;
                    overflow: hidden;
                    background-color: #072d69;
                    overflow: hidden scroll;
                    &::-webkit-scrollbar {
                      display: none;
                    }
                    /* 兼容火狐 */
                    scrollbar-width: none;
                    /* 兼容IE10+ */
                    -ms-overflow-style: none;
                  }
                  .ant-popover-buttons,
                  .ant-popover-arrow,
                  .ant-popover-message .anticon-exclamation-circle {
                    display: none;
                  }
                  .ant-popover-message,
                  .ant-popover-message-title {
                    color: #1990ff;
                    padding: 0;
                  }
                }

                .ant-calendar-picker {
                  .ant-calendar-range-picker-input {
                    &::-webkit-input-placeholder {
                      color: #1990ff;
                    }
                    &:-moz-placeholder {
                      color: #1990ff;
                    }
                    &::-moz-placeholder {
                      color: #1990ff;
                    }
                    &:-ms-input-placeholder {
                      color: #1990ff;
                    }
                  }
                  .ant-calendar-range-picker-separator {
                    color: #1b68d2;
                  }

                  .ant-calendar-picker-clear {
                    color: #fff;
                    background-color: transparent;
                  }
                }
                .ant-radio-wrapper {
                  color: #fff;
                  .ant-radio-inner {
                    border-color: #2490ff;
                    background-color: transparent;
                  }
                }
                .ant-input {
                  background-color: transparent;
                  border-color: #1b68d2;
                  color: #1b68d2;
                  &::-webkit-input-placeholder {
                    color: #1990ff;
                  }
                  &:-moz-placeholder {
                    color: #1990ff;
                  }
                  &::-moz-placeholder {
                    color: #1990ff;
                  }
                  &:-ms-input-placeholder {
                    color: #1990ff;
                  }
                }
                .ant-select {
                  width: 2rem;
                  .ant-select-selection--single {
                    background-color: transparent;
                    border-color: #1b68d2;
                    .ant-select-selection__placeholder,
                    .ant-select-selection-selected-value {
                      color: #fff;
                    }
                    .ant-select-arrow {
                      color: #1b68d2;
                    }
                  }
                }
              }
              input {
                width: 1.38rem;
                height: 0.38rem;
                outline: none;
                border-radius: 0.05rem;
                padding-left: 0.13rem;
                background-color: transparent;
                border: 0.01rem solid #0e5ac4;
                color: #2490ff;
              }
              input::-webkit-input-placeholder {
                color: #2490ff;
              }
              input:-moz-placeholder {
                /* FF 4-18 */
                color: #2490ff;
              }
              input::-moz-placeholder {
                /* FF 19+ */
                color: #2490ff;
              }
              button.search {
                width: 0.75rem;
                height: 0.38rem;
                margin-left: 0.38rem;
                outline: none;
                border: none;
                background-color: #2490ff;
                color: #fff;
                cursor: pointer;
              }
              span.con {
                font-size: 0.2rem;
                margin-left: 0.25rem;
                cursor: pointer;
              }
              .condition {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: absolute;
                background-color: #072d69;
                width: 4.25rem;
                top: 0.63rem;
                right: 0;
                z-index: 88;
                font-size: 0.15rem;
                color: #1990ff;
                padding-bottom: 0.23rem;
                .condition1 {
                  margin-top: 0.25rem;
                }
                .condition1,
                .condition2,
                .condition3 {
                  padding-bottom: 0.13rem;
                  select {
                    width: 2.5rem;
                    height: 0.3rem;
                    outline: none;
                    color: #fff;
                    background-color: #072d69;
                    border: 0.01rem solid #1990ff;
                  }
                  input {
                    width: 2.5rem;
                    height: 0.3rem;
                    outline: none;
                  }
                }
                .condition4 {
                  display: flex;
                  font-size: 0.15rem;
                  align-items: center;
                  .tcondition {
                    display: inline-block;
                    width: 2.5rem;
                    display: flex;
                    align-items: center;
                    input {
                      width: 0.15rem;
                    }
                    .text {
                      margin-right: 0.25rem;
                    }
                  }
                }
                div.btn {
                  margin-top: 0.25rem;
                  button {
                    width: 1rem;
                    height: 0.38rem;
                    margin-right: 0.25rem;
                    background-color: #072d69;
                    border: 0.01rem solid #1990ff;
                    color: #1990ff;
                  }
                  button:last-child {
                    background-color: #2490ff;
                    color: #fff;
                  }
                }
              }
            }
          }
          .middle__content {
            height: calc(100% - 0.63rem);

            .table {
              color: #fff;
              border: none;
              .title,
              .even {
                background: rgba(22, 45, 90, 0.6);
              }
              .title {
                font-size: 0.2rem;
                color: #1990ff;

                th {
                  padding: 0.13rem 0;
                }
              }
              tr {
                border: none;
                th,
                td {
                  vertical-align: middle;
                  text-align: center;
                  border: none;
                  width: 6.6%;
                }

                .picture {
                  width: 0.85rem;
                  height: 0.36rem;
                  background-color: #fff;
                }
              }
            }
            &:last-child {
              input {
                outline: none;
                border: 0.01rem solid #2490ff;
                width: 0.45rem;
                height: 0.3rem;
                background-color: rgb(24, 30, 48);
              }
              button {
                background-color: rgb(24, 30, 48);
                border: 0.01rem solid #2490ff;
                color: #2490ff;
              }
              select {
                color: #fff;
                border: 0.01rem solid #fff;
                background-color: rgb(24, 30, 48);
                font-size: 0.17rem;
              }
            }

            #rc__table {
              height: calc(100%);
              /* ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
              &::-webkit-scrollbar {
                display: none;
              }
              /* 兼容火狐 */
              scrollbar-width: none;
              /* 兼容IE10+ */
              -ms-overflow-style: none;
            }
          }
        }
        // <!-- 出入场 补录 匹配 -->

        .action {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(7, 45, 105, 0.4);

          font-family: MicrosoftYaHei;
          .parkPlateDetail {
            position: relative !important;
            .detail {
              justify-content: space-around !important;
              table {
                .label {
                  font-size: 0.25rem !important;
                  text-align: right !important;
                }
                .value {
                  width: 1.85rem;
                  padding: 0.13rem 0;
                  font-size: 0.19rem !important;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  -ms-text-overflow: ellipsis;
                  overflow: hidden;
                  /deep/ .ant-input {
                    font-size: 0.15rem !important;
                  }
                }
              }
            }

            .close {
              width: 0.39rem;
              height: 0.39rem;
              background-color: #000;
              border-radius: 50%;
              position: absolute;
              top: 0.19rem;
              right: 0.19rem;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          // 确认入场
          .parkEnter,
          .repairMes,
          .parkPlateDetail {
            .detail {
              display: flex;
              justify-content: center;
              align-items: center;
              table {
                .label {
                  font-size: 0.33rem;
                  color: #1990ff;
                }
                .value {
                  font-size: 0.3rem;
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  /deep/ .ant-input {
                    width: 1.6rem;
                    background-color: transparent;
                    border: none;
                    padding: 0;
                    font-size: 0.3rem;
                    color: #ffffff;
                    border-bottom: 0.03rem solid rgba(25, 144, 255, 1);
                    border-radius: 0rem;
                  }
                  .parkimg {
                    margin-left: 0.07rem;
                    width: 1rem;
                    height: 100%;
                  }
                }
              }
            }
          }

          .parkAppear,
          .parkEnter,
          .repairMes,
          .parkPlateDetail {
            width: 100%;
            height: 100%;
            display: flex;
            div {
              position: relative;
              flex: 5;
            }
            .enter,
            .appear {
              img {
                width: 100%;
                height: 100%;
              }
              .topcontetnt {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 0.5rem;
                background: rgba(0, 14, 62, 0.4);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 0.1rem;
                .left {
                  display: flex;
                  align-items: center;
                  .icon__car {
                    width: 0.19rem;
                    margin-right: 0.21rem;
                  }
                }
                .right {
                  font-size: 0.23rem;
                  color: #2fffa8;
                  text-align: right;
                }
              }
            }
            .appear {
              border-left: 0.01rem solid #0e5ac4;
            }
          }

          // 手动出场 未/查询到车辆信息
          .manualAppear {
            width: 100%;
            height: 100%;
            padding: 0.15rem 0;
            display: flex;
            flex-direction: column;
            .content,
            .botton {
              display: flex;
              align-items: center;
              table {
                tr {
                  margin-right: 0.38rem;
                }
                .placeholdericon {
                  width: 0.13rem;
                  height: 0.13rem;
                  border: 0.01rem solid #1b68d2;
                  display: inline-block;
                }
                .placeholdericon[data-pick='true'] {
                  background-color: #1b68d2;
                }
                /deep/ .ant-input {
                  background-color: transparent;
                  border-color: #1b68d2;
                  color: #1b68d2;
                  .ant-calendar-range-picker-separator {
                    color: #1b68d2;
                  }
                }
                /deep/ .ant-calendar-picker-clear {
                  color: #fff;
                  background-color: transparent;
                }
                /deep/ .ant-select {
                  width: 2rem;
                  .ant-select-selection--single {
                    background-color: transparent;
                    border-color: #1b68d2;
                    .ant-select-selection__placeholder,
                    .ant-select-selection-selected-value {
                      color: #fff;
                    }
                    .ant-select-arrow {
                      color: #1b68d2;
                    }
                  }
                }
              }
            }
            .content {
              width: 100%;
              flex: 9;
              justify-content: center;
              .hint {
                font-size: 0.23rem;
                color: #2490ff;
              }
              // <!-- 查询到车辆信息 匹配车辆 -->
              .parkMatching {
                width: 100%;
                height: 100%;
                .lefticon,
                .righticon {
                  position: absolute;
                  z-index: 2;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 0.5rem;
                  height: 0.5rem;
                  display: none;
                  &[data-show='true'] {
                    display: block;
                  }
                }
                .lefticon {
                  left: 0.25rem;
                }
                .righticon {
                  right: 0.25rem;
                }
                .item {
                  width: 25%;
                  height: 100%;
                  display: inline-block;
                  position: relative;
                  .top {
                    width: 100%;
                    height: 20%;
                    padding-left: 0.26rem;
                  }
                  .parkimg {
                    width: 100%;
                    height: 75%;
                    background-color: #666;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    .similarityRatio {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      color: #fff;
                      font-size: 0.17rem;
                      width: 40%;
                      height: 16%;
                      background-color: rgba(0, 0, 0, 0.72);
                      position: absolute;
                      top: 0;
                      right: 0;
                    }
                    .pick {
                      position: absolute;
                      bottom: 0.13rem;
                      right: 0.13rem;
                      width: 0.55rem;
                      height: 0.55rem;
                      display: none;
                      &[data-ck='true'] {
                        display: block;
                      }
                    }
                  }
                }
              }
              // <!-- 未查询到车辆信息 补录车辆 -->
              .parkEntering {
                width: 100%;
                padding-left: 0.5rem;
                .hint {
                  font-size: 0.3rem;
                  color: #49ffb2;
                  margin-bottom: 0.38rem;
                  display: inline-block;
                }
                table {
                  .label {
                    color: #fff;
                    font-size: 0.23rem;
                  }
                  tr {
                    td {
                      padding: 0.13rem 0;
                    }
                  }
                }
              }
            }
            .botton {
              flex: 1;
              padding-left: 0.25rem;
              table {
                width: 100%;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: row;
                flex-direction: row;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -ms-flex-align: center;
                align-items: center;
                tr {
                  margin-right: 0.19rem;
                }
              }
            }
          }
        }
      }
    }
    .right__myDetail {
      background: rgba(7, 45, 105, 0.4);
      flex: 2;
      .content {
        width: 92%;
        .middle__content {
          height: calc(100% - 0.63rem);
          .pkDetail__vessel {
            display: flex;
            flex-direction: column;
            align-items: center;

            height: 100%;
            .pknumber {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0.41rem 0 0.21rem;
              .title {
                font-size: 0.33rem;
                color: #1990ff;
              }
              .number {
                font-size: 0.57rem;
              }
            }
            .pkstatus {
              font-size: 0.25rem;
              color: #1990ff;
              width: 100%;
              display: flex;
              justify-content: space-between;
              // <span class="temporaryCar" data-attr="800">场内临时车</span>
              //   <span class="fixedCar" data-attr="60">场内固定车</span>
              //   <span class="restsCar" data-attr="20">场内其他车</span>
              .temporaryCar,
              .fixedCar,
              .restsCar {
                width: calc(100% / 3);
              }
              .temporaryCar::after,
              .fixedCar::after,
              .restsCar::after {
                font-family: MicrosoftYaHei;
                content: attr(data-attr);
                display: inline-block;
                font-size: 0.57rem;
                position: relative;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
              }
              .temporaryCar::after {
                color: #00d7ff;
              }
              .fixedCar::after {
                color: #f7b500;
              }
              .restsCar::after {
                color: #ffffff;
              }
            }
          }
          .myDetail__vessel {
            color: #1990ff;
            padding: 0 0.13rem 0 0.13rem;
            height: 100%;
            /* ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
            &::-webkit-scrollbar {
              display: none;
            }
            /* 兼容火狐 */
            scrollbar-width: none;
            /* 兼容IE10+ */
            -ms-overflow-style: none;
            .workTime {
              padding: 0.24rem 0;
              text-align: center;
            }
            .detail__content {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 0.2rem;
              div > span:nth-child(2) {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .main,
  .footer {
    .right__detail,
    .item__monitoring,
    .left__order .content__order,
    .right__myDetail {
      border: 0.03rem solid #0e5ac4;
      filter: blur(0rem);
    }
    .top__border::after {
      position: absolute;
      top: -0.04rem;
      left: -0.04rem;
      display: block;
      content: ' ';
      width: 0.19rem;
      height: 0.19rem;
      border: 0.04rem solid #1968ff;
      border-right: transparent;
      border-bottom: transparent;
    }

    .top__border::before {
      position: absolute;
      top: -0.04rem;
      right: -0.04rem;
      display: block;
      content: ' ';
      width: 0.19rem;
      height: 0.19rem;
      border: 0.04rem solid #1968ff;
      border-left: transparent;
      border-bottom: transparent;
    }

    .bottom__border::after {
      position: absolute;
      bottom: -0.04rem;
      left: -0.04rem;
      display: block;
      content: ' ';
      width: 0.19rem;
      height: 0.19rem;
      border: 0.04rem solid #1968ff;
      border-right: transparent;
      border-top: transparent;
    }
    .bottom__border::before {
      position: absolute;
      bottom: -0.04rem;
      right: -0.04rem;
      display: block;
      content: ' ';
      width: 0.19rem;
      height: 0.19rem;
      border: 0.04rem solid #1968ff;
      border-left: transparent;
      border-top: transparent;
    }
  }
}

.color-fff {
  color: #fff;
}

.diy-fz14 {
  font-size: 0.17rem;
}
.diy-fz12 {
  font-size: 0.15rem;
}
.diy-fz30 {
  font-size: 0.38rem;
}
button {
  border-radius: 0.05rem;
}
button:active {
  opacity: 0.7;
}
#components-dropdown-demo-placement .ant-btn {
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
</style>
